Detailed explanation of solving the problem that the browser cannot set the font smaller than 12px
1.1 Common browser analysis
Opera 45.0 version does not support setting the font size below 12px by
default; Safari supports setting the font size below 12px by default;
Mozilla firefox 53.0 version supports setting the font size below 12px by
default; Chrome does not support setting the font size below 12px by default The following;
IE 7+ version supports setting the font size below 12px by default;
through the above analysis, as long as you get the default settings of Opera and Chrome browsers, it will be OK.
1. 2 Chrome browser solution
1.2.1 Use CSS -webkit-text-size-adjust: none; attribute to achieve
syntax: -webkit-text-size-adjust: 100%|none|auto;
Note: only for chrome27 Versions below .0 are valid, and versions above 27.0 are invalid.
The desktop version of the webkit browser does not support -webkit-text-size-adjust: 100%;.
1.2.2 Extension
1. Overview
The CSS -webkit-text-size-adjust property is for mobile, and the reason why it is supported by desktop webkit browsers is because it is actually a bug. However, this bug has been fixed in the latest version of WebKit Nightly Builds.
2. The function
is generally used to prevent the iPhone from enlarging the text when the screen is turned to landscape.
Note: The viewport is set to maximum-scale=1.0, and the text will still be enlarged.
The iPhone defaults to -webkit-text-size-adjust: auto.
The iPad defaults to -webkit-text-size-adjust: none.
When setting the iPhone horizontal and vertical screen switching, the text will not be adjusted, use -webkit-text-size-adjust: 100%; absolutely cannot use -webkit-text-size-adjust: none;. Because this will cause desktop webkit browsers that still support -webkit-text-size-adjust: none; to artificially enlarge the text size, which will seriously affect usability.
1.2.3 Use CSS -webkit-transform: scale( ); property to achieve
When transform:scale() is used, not only the text becomes smaller, but the container label where the entire text is located will also become smaller at the same time.