How to display an html page at the width of the "Form sheet" modal on iPad without hard-coding the page width?

Question

I know the width of the "Form sheet" modal on the iPad screen (540 x 620), the width of iPad screen (768 x 1024), and the width iPhone screen (320 x 480)… but when loading an html page into the "Form sheet" modal the width defaults to the device width per the viewport meta tag:

<meta name="viewport" content="width=device-width">

This is necessary to display the page a the width of the device it's on, which is a different width per device. Since the iPad will have multiple widths.

I'm loading the web page into the "Form sheet" modal on an iPad and the full screen when viewing in an iPhone app.

How do I get a web page to display at the width of the "Form sheet" modal on iPad without hard-coding the width?

So far the only solution I've found to work is to not set a device width and design a 100% width web page.

Answer 1

You can set the viewport attributes via javascript, as well as in the meta tag - I think that's going to be the cleanest solution:

if (window.innerWidth == 420) {
    //For form sheet modal
    document.body.setAttribute('width', 420);
    document.body.className += 'iPadModal';
} else if (window.innerWidth == 320) {
    //For iPhone portrait
    document.body.setAttribute('width', 320);
    document.body.className += 'iPhonePortrait';
} // ... etc..

Now, that example is using some pretty crude detection - if might be better to sniff the other attributes that iPhone gives to the document to more accurately tell what display your page is showing on (width, height, initial-scale, user-scalable, minimum-scale and maximum-scale)

Here's a good reference to these attributes: http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm