201703 月发表在 笔记

28移动端 HTML5 避免在 iPhone 切换到横屏的时候字体变大

通过设置 viewport 适配移动端的页面,在 iPhone 竖屏的时候一切正常,但是在横屏的时候,所有的文字却迷之变大。这个时候,可以通过一个 CSS 属性解决:

-webkit-text-size-adjust: none;

在 body 上设置这个属性后,将 iPhone 切换到横屏,文字大小便正常了。但是,应用了这个 CSS 属性后,某些版本的 Chrome 和 Safari 会出现无法设置页面文字大小的情况。这是因为这个 CSS 属性只应被移动端浏览器识别,然而这些版本所使用的 WebKit 存在 Bug,导致这些属性也被应用到了桌面端。如需解决此问题,可以使用下面的 workaround:

-webkit-text-size-adjust: 100%;

zyxwvu
UNDER CONSTRUCTION