The usage of WebKit text size adjust

1. When font size & lt; 12px is used in the stylesheet, the font display in the Chinese Chrome browser is still 12px. In this case, you can use HTML {- WebKit – text size- adjust:none; }
2, – WebKit text size adjust placed on the body will cause page scaling failure
3, the body will inherit the style defined in HTML
4, – WebKit text size adjust should not be defined as inheritable or global

It’s recognizable on Apple’s mobile device and is used to keep the text size.

All page writers should know that the minimum font size of Chrome browser is 12px by default. If you want to set a certain font size to 10px, you will find that it is still 12px in chrome. If you want this to take effect, you have to modify the default configuration of chrome. Generally, the following code can take effect globally:

1
html { -webkit-text-size-adjust: none; }

However, there will be a problem after this setting, that is, when you enlarge the web page, the font will generally become larger. After setting the above code, the font will only display the font size you currently set, and will not become larger as the web page is enlarged. This will cause a bad user experience for users who need to enlarge the web page. Therefore, it is not recommended to apply this method globally Property, but use it alone when you need it.

In the Chinese version of chrome, all font settings less than 12px in CSS are invalid, and 12px will eventually be displayed. This may be a good idea, because once Chinese is less than 12px, it becomes difficult to read.

However, the Chinese version of chrome can also read English websites. There are also small font settings in English on Chinese pages. In particular, the design of some text parts is not good-looking, which affects the beauty of the whole typesetting.

Solution: add a private property to the HTML selector

1
html{-webkit-text-size-adjust: none;}

As the name suggests, the text resizing function of WebKit kernel browser is disabled.

If you want to turn on zoom, define the following global styles:

1
*{-webkit-text-size-adjust:auto !important;}

Similar Posts: