小心 -webkit-text-size-adjust:none![译]

有一天我打开一个网站,上面的文字很小,看起来很不舒服。我按了很多次Command加+希望Safari能放大一点字体...但是什么都没有发生。怎么了?!

研究了网站的css之后,发现“真凶”是下面的CSS(千万别这样用):

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

这断代码阻止webkit内核浏览器自动调整文字大小,甚至是整个页面。现在,对于如何阻止你的用户去放大页面的文字难道不是个好的方法么?

根据 Safari 的CSS参考 -webkit-text-size-adjust 用来指定iOS的Safari浏览器调整页面文字的大小。 当设置成 “none” 的时候,文本的字体不会被校正。

但是,我的Mac电脑里用的是Mac OS X Snow Leopard系统,并没有webkit内核的浏览器(Safari,Chrome....)但是自动调整大小却生效了,可见,并不仅仅适用于iOS的Safari浏览器。

请特别留意这个属性,用在一些特殊的并且不重要的文字上(局部)。我没有找到更好的理由把它用在body上,尤其是移动设备。

英文原文地址 http://www.456bereastreet.com/archive/201011/beware_of_-webkit-text-size-adjustnone/

原创翻译 转载请注明出处 http://www.zhuwenlong.com

Write a response...
Mofei Zhu
publish