css – 请帮我理解移动Safari的文本大小

前端之家收集整理的这篇文章主要介绍了css – 请帮我理解移动Safari的文本大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
默认情况下,Mobile Safari会调整部分文字,包括< h1>和< h2&元素.我搜索了SO,看看我能如何预防,发现这样的问题: Font size issue with iPhone

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”时,它的浏览器.

(我目前处于无法验证这一点的地位,但我会假定他和其他提出索赔的人是正确的.)

所以我的问题是:如何在移动Safari中获得对头文件和段落之间的相对文本大小的控制,而不牺牲辅助功能

@R_301_323@

据了解,这个关键问题是这个规则是自己应用的 – 因为当值“none”时,它适用于任何webkit浏览器,无论是台式机,手机大小还是平板电脑.桌面webkit浏览器不会应用任何其他值,只要我可以告诉(-webkit-font-size-adjust:150%;什么都不做).

当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并将一个类添加到文档的正文以应用规则是不好的.这样,当有新显示器的设备出来时,您不需要重新修改新的规则.

猜你在找的CSS相关文章