Question

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

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

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

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

如何在没有硬编码宽度的情况下在iPad上的“表单”模式的宽度上显示网页？

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

Answer 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给文档的其他属性，以更准确地告诉你的页面显示的是什么（宽度，高度，初始规模，用户 - 可扩展，最小规模和最大规模）

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

Answer 2

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

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

2 个答案: