iPhone和Android横向时如何限制网页缩放？

Question

如何在横向iPhone和Android时限制网页缩放？

当我将iphone旋转到横向时，屏幕在屏幕上占用30％的空间，但在纵向模式下它只占15％。

我是否必须为横向方向的某些元素编写不同的CSS？

Answer 1

您可以使用视口元标记as described by Mozilla。 Apple Documentation for developing web content for iPad也很好地描述了这个标签。 Apple建议：

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

修改

在您的情况下，您可以尝试：

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width;">

您可以尝试使用the technique mentioned here，为不同的方向使用不同的样式表。

Answer 2

尝试添加webkit css

body {
    -webkit-text-size-adjust:none;
}

当你进入风景时，它基本上会停止调整字体大小。

谨慎使用，因为如果你让这个css被桌面safari客户端读取，那么它将阻止任何用户缩放尝试影响字体大小。