Preventing iPhone scaling when rotated
font size change after orientation screen change to horizontal
请注意,所有这些的答案是CSS属性：
-webkit-text-size-adjust:none;
这对于在移动Safari上的标题和段落元素之间保持相对文本大小非常有用.不过,我偶然发现刚才的一篇博客文章：Beware of -webkit-text-size-adjust:none：
What that does is prevent WebKit-based browsers from resizing text. Not even full page zoom resizes the text. Now,how can preventing your users from resizing text be a good idea?
According to Apple’s 07004,-webkit-text-size-adjust “Specifies a size adjustment for displaying text content in Safari on iOS”.
When given a value of “none”,the documentation specifies that “The text size is not adjusted”.
现在,我把属性描述意味着相对文本大小不会被自动调整,而不是用户无法调整文本大小,但是作者说他的测试显示文本确实无法在WebKit中调整当指定值为“none”时,它的浏览器.
(我目前处于无法验证这一点的地位,但我会假定他和其他提出索赔的人是正确的.)
解决方法
当iOS上的Mobile Safari或任何移动Webkit浏览器(Android等)都应用“无”时,您会发现“正确”效果如何：浏览器不会尝试调整某些元素,你(设计师)仍然相对于彼此控制它们的大小.您仍然可以捏/缩放和双击缩放放大/缩小视口.移动浏览器进行视口缩放,而不是文本缩放.
但是,当这个规则适用于桌面webkit(Safari,Chrome)时,感觉是错误的,因为桌面webkit执行文本缩放,并且此规则可以防止这种情况发生.
所以 – 解决方案是只针对这个规则的移动webkit. CSS媒体查询是对此的逻辑回答,但是管理所有iOS设备的目标是有点笨重和不精确：
@media screen and (max-device-width: 480px),screen and (-webkit-min-device-pixel-ratio: 2),screen and (device-width: 768px) {
body {
-webkit-text-size-adjust:none;
}
}
这应该让你所有的iPhones到3GS(第一规则),iPhone 4(第二规则)和iPad(第三规则).理论上,第三条规则在理论上也与桌面Safari相匹配,当视口完全为768像素宽,但实际上并不实际.
说实话,我不知道使用javascript检测移动Safari并将一个类添加到文档的正文以应用规则是不好的.这样,当有新显示器的设备出来时,您不需要重新修改新的规则.
