如何在方向更改时禁用MobileSafari的内容scalling？
aka*_*kyy 5 html css iphone mobile-safari orientation
我正在制作我的应用程序支持网站的移动版本,我在这里有一点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会缩放我的内容,使其看起来像是肖像,但更大一些:
我的问题:有没有办法,不为每个方向制作自定义CSS,强迫Safari不扩展我的内容？
Dav*_*cea 10
修复此问题的关键部分不是元视口标记(虽然这也很重要,但出于不同的原因).这是修正方向更改时文本大小的魔力.
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
(我从StackExchange的移动CSS文件中得到了这个.)
- 我认为这是最好的答案.禁用用户扩展不是非常用户友好.有关详细信息,请参阅http://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ (2认同)
您可能希望使用该<meta name="viewport" .../>标记(请参阅MDN文档和Safari Web内容指南).移动Stack Exchange布局使用:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />
| 归档时间： |
|
| 查看次数： |
7832 次 |
| 最近记录： |