One day I opened a website, and the text was very small, which looked very uncomfortable. I pressed Command plus + many times hoping that Safari would enlarge the font a bit... but nothing happened. What’s going on?!

After researching the website's CSS, I found that the "real culprit" was the following CSS (don't use it this way):

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

This line of code prevents WebKit-based browsers from automatically adjusting text size, even for the entire page. Now, isn't it a bad idea to stop your users from enlarging the text on the page?

According to the Safari CSS reference, -webkit-text-size-adjust is used to specify how the iOS Safari browser adjusts the font size of text on the page. When set to "none", the font of the text will not be corrected.

However, my Mac computer is running Mac OS X Snow Leopard, which does not have a WebKit-based browser (Safari, Chrome...) but automatic resizing is still effective, indicating that it is not limited to just iOS Safari browsers.

Please pay special attention to this property, especially when it is used on certain special and unimportant texts (locally). I could not find a better reason to use it on the body, especially for mobile devices.

Original English text can be found at http://www.456bereastreet.com/archive/201011/beware_of_-webkit-text-size-adjustnone/

Original translation, please indicate the source http://www.zhuwenlong.com