禁止文本大小根据设备大小自动调整

  • Jesse
  • 2013-12-19 19:03:00
  • 470

最近在做ios应用页面时,用iPhone的safari打开,发现竖屏的字体显示正常,横屏字体变大

网上查了N久,很多人都说在网站头部加上

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>


即可解决此问题,后来发现完全没用,无意中在网上找的一个前端网站,测试下OK。

现在记录下,权且当做笔记吧,也可以给更多的人分享:

在css文件中加上如下代码即可解决此问题:

.body{-webkit-text-size-adjust:none;}


其实它的作用是:兼容safari 3.0+,chrome 1.0+ 解决字体大小根据设备大小自动调整问题

而text-size-adjust:也有几种属性:

percentage:字体显示的大小;
auto:默认,字体大小会根据设备/浏览器来自动调整;
none:字体大小不会自动调整

备注:该属性仅支持safari 3.0+,chrome 1.0+,所以也不用担心其它浏览器带来的不兼容问题。