It perfectly solves the problem that mobile Web is less than 12px text center, web12px

It perfectly solves the problem that mobile Web is less than 12px text center, web12px

A blog post posted a few days ago: the vertical center of single-line text in mobile Web mentioned the abnormal text center smaller than 12px in mobile web. The problem was almost solved by changing to 12px. But sometimes it may not be so optimistic. You cannot change the font originally set as 10px to 12px. What should we do.

We all know that there are several methods for the mobile terminal to display 1 px border on the HD screen. The best method is transform scale and supports rounded corners. Since a border can be scaled, the entire text area can also be scaled.

For example, in the previous blog, CSS is like this:

.label {  height: 20px;  line-height: 20px;  font-size: 10px;  border: 1px solid #000;}

Since we want to scale, we will also add a pseudo class with 1px border. We will multiply each size by 2, and then scale it to half of the original size:

.label {  height: 40px;  line-height: 40px;  font-size: 20px;  border: 1px solid #000;  -webkit-transform: scale(0.5);  transform: scale(0.5);  -webkit-transform-origin: 100% 100%;  transform-origin: 100% 100%;}

However, it may be that the line-height is not very good on the mobile end, and the center effect is not good. It is better to change it to padding.

Try another solution, package a parent element to the outer layer of the element, and implement it using display: table.

<Div class = "label-parent"> <p class = "label"> who are you </p> </div>

.label-parent {  display:table;  height: 40px;  line-height: 40px;  font-size: 20px;  border: 1px solid #000;  -webkit-transform: scale(0.5);  transform: scale(0.5);  -webkit-transform-origin: 100% 100%;  transform-origin: 100% 100%;}.label {  display: table-cell;  vertical-align:middle;} 

This should be a sound solution. Write more layers and discard padding and line-height. The final implementation effect is also good. Some children's shoes may be confused. The chrome simulator may be confused, but the screen size on the mobile phone is mostly high-definition, and there is almost no blur.

 

It works normally on IOS and Android4.x, but Android2.3 does not scale. In a search, scale and translate do not work together. In other words, viewport settings are useless, therefore, you can set an unscaled style for Android2.x as long as the layout is not messy.

.label-2x {  height: 20px;  line-height: 20px;  font-size: 10px;  border: 1px solid #000;}

How can we know that the system is 2x? We found a useful script in Special CSS3 Scaling for andriod version less than 2.3:

var ua = navigator.userAgent;if( ua.indexOf("Android") >= 0 ) {  var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8));  if (androidversion <= 2.3) {      // alert('andriod < 2.3');      // your code here  }}

You can dynamically Add a piece of css to the style. If there is only one label, you can directly change the style by using dom.

 

At this point, I don't want to worry about it anymore...