如何在 iPad 上以“表单”模式的宽度显示 html 页面而不对页面宽度进行硬编码？答案

【问题标题】：How to display an html page at the width of the "Form sheet" modal on iPad without hard-coding the page width?如何在 iPad 上以“表单”模式的宽度显示 html 页面而不对页面宽度进行硬编码？
【发布时间】：2011-03-10 09:53:33
【问题描述】：

我知道"Form sheet" modal 在 iPad 屏幕上的宽度 (540 x 620)、iPad 屏幕的宽度 (768 x 1024) 和 iPhone 屏幕的宽度 (320 x 480)……但是在加载 html 页面时进入“表单”模式，宽度默认为每个视口元标记的设备宽度：

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

这是显示页面所必需的设备的宽度，这是每个设备的不同宽度。因为 iPad 会有多种宽度。

我正在将网页加载到 iPad 上的“表单”模式中，并在 iPhone 应用程序中查看时全屏显示。

如何在 iPad 上以“表单”模式的宽度显示网页而不对宽度进行硬编码？

到目前为止，我发现唯一可行的解决方案是不设置设备宽度并设计 100% 宽度的网页。

【问题讨论】：

标签： iphone html css web-applications ipad

【解决方案1】：

您可以通过 javascript 以及在元标记中设置视口属性 - 我认为这将是最干净的解决方案：

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..

现在，该示例使用了一些非常粗略的检测 - 如果可以更好地嗅探 iPhone 提供给文档的其他属性，以更准确地判断您的页面显示在什么显示上（宽度、高度、初始比例、用户-scalable, minimum-scale and maximum-scale)

这里有一个很好的参考这些属性：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

【讨论】：

【解决方案2】：

<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />

【讨论】：