iPhone和Android横屏时如何限制网页缩放拉伸？

Question

iPhone和Android横屏时如何限制网页缩放拉伸？

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

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

Answer 1

您可以使用视口元标记，如 Mozilla 所描述。 用于开发 iPad 网页内容的 Apple 文档 描述了这个标签也很好看。 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;">

您可以尝试使用 这里提到的技术，针对不同的方向使用不同的样式表。

Answer 2

尝试添加 webkit css

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

当您进入横向模式时，它基本上会停止调整字体大小。

请小心使用，因为如果您让桌面 safari 客户端读取此 css，那么它将阻止任何用户缩放尝试影响字体大小。