如何在方向更改时禁用 MobileSafari 的内容缩放？答案

【问题标题】：How can I disable MobileSafari's content scaling on orientation change?如何在方向更改时禁用 MobileSafari 的内容缩放？
【发布时间】：2011-08-18 18:44:11
【问题描述】：

我正在制作我的应用程序支持网站的移动版本，但这里有一点 WebKit/iOS/HTML/CSS 问题...

我有一个页面index.php，附有mobile.css 文件。在我的<head> 标签中，我有：

<meta name="viewport" content="width=device-width, user-scalable=no, max-scale=1.0" />

我body的css：

body {
    font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Helvetica","Lucida Grande",Verdana,Arial,sans-serif;
    margin: 0;
    background: url(../../images/textured_bg.png) repeat;
    color:#454545;
    font-size: 14px;
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px;
    width:100%;
}

在纵向时一切正常，但是当我将 iPhone 旋转到横向时，Safari 会缩放我的内容，使其看起来像纵向，但更大一点：

我的问题：有没有办法在没有making custom css for each orientation 的情况下强制 Safari 不缩放我的内容？

【问题讨论】：

我自己没有iphone，但这是手机的正常行为吗？用户是否希望内容在切换方向时被缩放？
也许吧，但我不希望我的内容被缩放，因为我的图像像素化了。 PS：有些网站不会扩展其内容，例如StackOverflow：cl.ly/0o0t2N2225063T2N2E05
如果像素化图像是问题，您可以考虑使用 svg。
不是像素化的问题。

标签： iphone html css orientation mobile-safari

【解决方案1】：

解决这个问题的关键部分不是元视口标签（虽然这也很重要，但出于不同的原因）。这是在方向更改时修复文本大小的魔法。

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

（我从 StackExchange 的移动 CSS 文件中得到这个。）

【讨论】：

我认为这是最好的答案。禁用用户缩放对用户来说不是很友好。欲了解更多信息，请参阅456bereastreet.com/archive/201012/…
如果在onorientationchange 触发时文本输入被聚焦，这将不起作用。见demo here。

【解决方案2】：

您可能想要使用<meta name="viewport" .../> 标签（请参阅MDN docs 和Safari Web Content Guide）。移动 Stack Exchange 布局使用此：

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

【讨论】：

MDN 说使用逗号，Apple 说使用分号。不过，似乎两者都可以使用分号。

【解决方案3】：

我尝试了逗号，但没有用 - 然后尝试了分号，它确实有效。 iPod touch，iOS 4.2

【讨论】：