Minimum font size

The Chinese Chrome browser does not support solutions for fonts below 12px

Chrome 27 before the Chinese version of the desktop browser will default to set the minimum size of the page is 12px, the English version is not limited, mainly because Chrome believes that Chinese characters less than 12px will increase the difficulty of recognition, especially in Chinese commonly used in the song and Microsoft Ya Black. And we in the actual project, for the number/English content, the other font text may have the special request that they appear with the smaller font size, this time needs to cancel the browser automatic adjustment function.

The general solution is to disable the WebKit browser configuration to adjust the font size of the Web page. The following CSS defines the way:
[CSS] View plaincopy
. classstyle{-webkit-text-size-adjust:none; font-size:9px;}

Let's talk about the Text-size-adjust property, which is used to set whether the text size automatically adjusts the display size based on the device (browser), which safari 3.0+,chrome 1.0+ can support. The value of the property can be three kinds:
Percentage: The size of the font display;
Auto: By default, the font size is automatically adjusted according to the device/browser;
None: Font size does not adjust automatically

It is said that this property was originally designed specifically for the iphone version of Safari, to automatically adjust the normal Web page on the iphone font display problem, but since it is WebKit's private properties, is now often used in the WebKit kernel desktop browser limit page display. In fact, this is a bug in WebKit. The latest version of Chrome has been fixed.

It is important to note that unreasonable use of-webkit-text-size-adjust:none can cause a lot of bad effects. For example, if you define it as a global attribute, in Chrome, when the user zooms out of the page (CTRL + Scroll the mouse wheel on the PC to zoom the page), the text maintains the defined size without shrinking, giving the user a less-than-friendly experience. So when we use, it is better to define the local effective, rather than the diagram of a html{-webkit-text-size-adjust:none; Something

Because there is no-o-text-size-adjust, such CSS properties, in Opera, we can only manually set by ourselves: tools, such as preferences, high-level fonts, such as the minimum font size (pixels).

The PC desktop version of Chrome 27 officially cancels the support for the-webkit-text-size-adjust attribute, in effect correcting the original bug. If the attribute is defined in the Chrome Debug window, the Unknown property name is displayed, and all font sizes are at least 12px. However, the mobile-side Chrome/safari still supports the-webkit-text-size-adjust attribute at this time. Because the misuse of this property will make the WebKit kernel browser lose the ability to adjust, for visually impaired viewers are very unfriendly (especially the mobile terminal), then how to achieve the original demand it?
We can try to solve this by applying the following styles locally to the text area:

[CSS] View plaincopy
. chrome_adjust {
font-size:9px;
-webkit-transform:scale (0.75);
}

12x0.75=9, for other browsers, the font size below 12px is recognizable and only needs to be scaled for the Chrome browser. But how to tell whether Safari or Chrome, there is no effective CSS hack. You can use JavaScript to determine if it's chrome. Judgment method: var ischrome =!! Window.chrome; When testing for chrome, add the. Chrome_adjust class to the corresponding label.

However, the problem has not been resolved. See the different performance of Web pages in three browsers:
1), chrome under because of the zoom enabled, so the problem of character spacing, affecting the beautiful, this time if the pursuit of perfection, you may also think of JS as Chrome and then use CSS properties letter-spacing to repair ;-webkit-transform-origin-x:0;
2), Firefox do not know-webkit, so the normal performance, 9px;

3), opera 12.5+ can recognize the-webkit-prefix (opera 12.15, the kernel has not been replaced with WebKit, but has been able to recognize the-webkit-prefix, but also erase the prefix when checking the element), but can display the size of 12px or less, The result became 9x0.75, which affected the recognition of the naked eye, and at this time added-o-transform:scale (1) to opera.

[CSS] View plaincopy
. chrome_adjust {
font-size:9px;
-webkit-transform:scale (0.75);
-o-transform:scale (1); For Opera browser settings that recognize-webkit

-webkit-transform-origin-x:0; Can solve the gap between text reduction;
}

In fact, opera from Norway has always used its own engine (Presto), but often creates some so-called "compatibility issues." In a growing number of sites for WebKit optimization, opera's strategy is to introduce some of the WebKit engine prefix attributes, to avoid the developer because of the page property selection to affect opera function. Opera 12.50 will be the first desktop browser to support the WebKit property, including two different types of-webkit-linear-gradient and-o-linear-gradient. Mobile versions will also use the same core. Developers of related tests can download the simulator Opera Mobile emulator--windows, Linux, Mac version.

Minimum font size