代码之家 › 专栏 › 技术社区 › Beau Smith

如何在iPad上以“表单”模式的宽度显示HTML页面,而不需要对页面宽度进行硬编码?

ipad web-applications css html iphone

1

Beau Smith · 技术社区 · 16 年前

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

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

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

当我在ipad上观看iphone应用程序时,我会将网页加载到“表单”模式和全屏模式中。

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

到目前为止,我找到的唯一解决方案是不设置设备宽度和设计100%宽度的网页。

2 回复 | 直到 15 年前

1

Ben Hull 16 年前

您可以通过javascript和meta标签设置视区属性-我认为这将是最干净的解决方案:

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

2

-2

Evlas1013 15 年前

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