如何在方向改变时禁用 MobileSafari 的内容缩放？
我正在制作我的应用程序支持网站的移动版本，但这里遇到了一些 WebKit/iOS/HTML/CSS 问题...
我有一个页面 index.php，其中包含 mobile .css 附加文件。在我的 标签中，我有：
<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 会缩放我的内容所以它看起来像肖像，但有点大：
我的问题：有没有办法，没有 <一个href="https://stackoverflow.com/questions/6519998/scale-down-mobile-safari-viewport-width-when-ipad-is-in-portrait-orientation/6521273#6521273">为每个方向制作自定义CSS ，强制 Safari 不缩放我的内容？
I'm making a mobile version of my application support site and I have a little WebKit/iOS/HTML/CSS problem here...
I have a page, index.php, with mobile.css file attached. In my <head> tag I have:
<meta name="viewport" content="width=device-width, user-scalable=no, max-scale=1.0" />
My body's 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%;
}
Everything works fine in portrait orientation, but when I rotate my iPhone to landscape, Safari scales my content so it looks like in portrait, but a little bigger:
My question: Is there a way, without making custom css for each orientation, to force Safari not to scale my content?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
解决这个问题的关键部分不是元视口标签（尽管这也很重要，但出于不同的原因）。这是在方向变化时固定文本大小的魔法。
（我从 StackExchange 的移动 CSS 文件中得到这个。）
The key part to fixing this isn't the meta viewport tag (though that's important, too, but for different reasons). Here's the magic that fixes the text size on orientation change.
(I got this from StackExchange's mobile CSS file.)
您可能需要使用
标签（请参阅 MDN 文档 和 Safari Web 内容指南）。移动 Stack Exchange 布局使用以下内容：You will probably want to use the
<meta name="viewport" .../>tag (see MDN docs and Safari Web Content Guide). The mobile Stack Exchange layout uses this:我尝试了逗号，但不起作用 - 然后尝试了分号，确实起作用了。 iPod 触摸、iOS 4.2
I tried commas, didn't work - then tried semicolons, that DID work. iPod touch, iOS 4.2