iphone - 如何在 iPad 上以 "Form sheet"模式的宽度显示 html 页面而不对页面宽度进行硬编码？

Question

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

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

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

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

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

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

Answer 1

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

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 提供给文档的其他属性，以便更准确地判断您的页面在什么显示器上显示(宽度、高度、初始比例、用户-可扩展，最小规模和最大规模)

以下是对这些属性的一个很好的引用: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