iphone - 当 iPhone 和 Android 横向时，如何限制网页缩放拉伸(stretch)？

Question

如何在iPhone和Android横向时限制网页缩放拉伸(stretch)？

当我将 iPhone 旋转为横向时，标题在屏幕上占据了 30% 的空间，但在纵向模式下它只占用了 15%。

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

Answer 1

您可以使用视口(viewport)元标记，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 , 为不同的方向使用不同的样式表。