当前位置: 代码迷 >> 综合 >> 手机横屏后字体变大 -webkit-text-size-adjust
  详细解决方案

手机横屏后字体变大 -webkit-text-size-adjust

热度:105   发布时间:2023-10-12 17:16:22.0

近期遇到一个问题,在H5页面给字体设置了固定的尺寸15px,在andriod手机上横竖屏字体大小不变,但是在苹果手机上,横屏字体会变大,在网上查了资料才知道,需要设置一个属性text-size-adjust

-webkit-text-size-adjust: 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浏览器无法人为放大文字大小,严重影响可用性。

取值:

auto:(默认取值)文本大小根据设备尺寸进行调整。
none:文本大小不会根据设备尺寸进行调整。
:用百分比来指定文本大小在设备尺寸不同的情况下如何调整。

说明:
  • 检索或设置移动端页面中对象文本的大小调整。
  • 该属性只在移动设备上生效;仅支持webkit内核!
  • 如果你的页面没有定义meta viewport,此属性定义将无效;
  • 对应的脚本特性为textSizeAdjust。
  相关解决方案