html5 - 在移动端设置font-size小于12px。line-height的问题

Question

正如标题所说，比如我在一个标签内设置font-size：10px，那么他的line-height就默认为16px了，在设置line-height：10px是不生效的，设置line-height大于12px的时候就生效了，ios上没问题，这是什么情况啊。。。有解决办法没

Answer 1

When font-size<12px in the style sheet, the font display in the Chrome browser is still 12px. In this case, you can use html{-webkit-text-size-adjust:none;}

Answer 2

Chrome did not support Chinese below 12px before, because it was too difficult to identify Chinese below 12px. Based on my development experience on the mobile terminal

1. When setting a font smaller than 12px, there is no problem on ios, but there will be problems on Android, even if -webkit-text-size-adjust is used, because some Android browsers do not support this feature

2. If you really need to have words smaller than 12px, it is recommended to use scale to ensure consistency on all ends

Answer 3

1. When font-size<12px is in the style sheet, the font display in the Chinese version of Chrome browser is still 12px. In this case, you can use

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

2 Placing 、-webkit-text-size-adjust on body will cause the page zoom to fail
3. body will inherit the style defined in html
4. Do not define it as inheritable when using -webkit-text-size-adjust or global

However, it is only valid for versions below chrome27.0 and invalid for versions above 27.0. It is only valid for English and not for Chinese.
In the new version of chrome, changing attributes has been banned. It is recommended to use the method in CSS3:

transform:scale(0.875);

When using transform:scale(0.875); not only the text will become smaller, but the container where the entire text is located will also become smaller at the same time.