I am currently facing an issue with adjusting the size of a specific page within my application.
Even though I am using
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi"/>
to set the "normal" size for all pages, I need to modify the width of one particular page due to its wider image display. However, when I attempt to adjust it using
<div date-role="page" id="organigram" style="min-width:1000px;">
or with CSS:
#organigram > .ui-page {
min-width: 1000px;
}
it affects the width of ALL pages until I navigate away from this specific one containing the larger image. Upon returning via the "Back" or "Home" button in the page header, all sizes revert back to normal (device-width) except for the page with the modified min-width. Unfortunately, this is not suitable for my requirements. I have tried altering the image's width directly within the page, but this has no effect at all. Any suggestions or additional code needed, please let me know. Thank you!
/edit: I managed to find a temporary solution using JavaScript. Once the page loads, my script replaces the entire content of the page by
document.getElementById('organigram').innerHTML = myPageContent;
Nevertheless, this is not an ideal long-term fix.