CSS iPhone 和 Android 的浏览器模式自动调整字体大小

🌙
手机阅读
本文目录结构
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;

iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。

text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能。

这属性现在的一般用处是防止 iPhone 在坚屏转向横屏时放大文字(注意,就算 viewport 设置了 maximum-scale=1.0 文字还是会放大的)。

而且 iPhone 和 iPad 的默认设定是不一样的,iPhone 默认设定 -webkit-text-size-adjust: auto;

iPad 默认设定 -webkit-text-size-adjust: none;所以 iPad 默认是不调节的。

此属性还支持百分比,这在当前的桌面版的 webkit 浏览器是不支持的,所以如果不想让 iPhone 横坚屏切换的时候调节文字,用 -webkit-text-size-adjust: 100%;

绝对不能用 -webkit-text-size-adjust: none;这会导致仍然支持 -webkit-text-size-adjust: none;的桌面版的 webkit 浏览器无法人为放大文字大小,严重影响可用性。

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

书籍推荐

本文目录