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

您可以通过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

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