如何限制横向放大的iPhone和Android横向放大的网页？

Question

如何限制网页的缩放拉伸时，iPhone和Android在横向方向？

当我旋转iPhone到横向，头需要在屏幕上30％的空间，但在肖像模式下只需要15％。

我需要编写不同的CSS在横向某些元素？

Answer 1

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

<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浏览器中读取，然后它会阻止影响字体大小的任何用户缩放尝试。