Question

我正在制作我的应用程序支持网站的移动版本，我在这里有一点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会缩放我的内容，使其看起来像是肖像，但更大一些：

enter image description here

我的问题：如果没有making custom css for each orientation，是否有办法强制Safari不扩展我的内容？

Answer 1

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

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

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

Answer 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" />

Answer 3

我试过逗号，没有用 - 然后尝试用分号，DID工作。 iPod touch，iOS 4.2

如何在方向更改时禁用Mobile Safari内容缩放？

3 个答案: