- iOS5
On: 82px; under: 84px;
- Ios6
On: 82px; under: 84px;
- IOS6 Plus
On: 124px; under: 126px;
- mi4w
On: 118px; under: 130px;
- Vivo
On: 58px; under: 64px;
The actual operation found that the iOS system up and down two pixels (also may be the error of my distance measurement)
But android on the difference between the larger, and different models vary the number of
Cause
Asked the technical great God, said is Line-height on part of Android phone does not work, has its own default row height, the default row height is 22px (this I did not experiment, do not know whether accurate)
Workaround
line-height:normal;
padding:10px 0;
Currently only found this method, did not find other methods, there are new methods will be updated, please correct me.
Or:
About line-height Everyone should be very familiar with it, is used to do vertical centering, tried, basically no problem, but a recent project, the test has introduced a bug, look at the picture bar.
Stolen from elsewhere, this problem only on Android can be reproduced, do a demo, found should be font-size problem, you can try it yourself, font-size 13px or odd, line-height will have a certain deviation, there is no problem in Safari, As for the reasons, have not been found, and so found to add.
Solutions
Although the reason is not found, but can be roughly guessed that the Andros number causes the line-height to divide the upper and lower margins when there is a deviation, then we can start with this.
Since line-height is not evenly divided, then abandon Line-height bar, see the code
Very simple, will line-height set to 0, with padding to fill, perfect realization, self-test no problem, if cause other problems, welcome message points out
The UC mobile browser will automatically enlarge the font-optimized reading experience when it recognizes a lot of page text, and if you want to turn off this feature, add it to the page header:
<meta name= "Wap-font-scale" content= "no" >
Mobile-Line-height Issues