Mobile-Line-height Issues

Source: Internet
Author: User

    1. iOS5

      On: 82px; under: 84px;
    2. Ios6

      On: 82px; under: 84px;
    3. IOS6 Plus

      On: 124px; under: 126px;
    4. mi4w

      On: 118px; under: 130px;
    5. 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.