Css – Font size in iPhone looking different compare to other browsers

Well, While developing the UI of webpage, we should known about font rendering techniques. Safari/iPhone will be automatically scaling the font size in some way. Like that only i got issue when i ran my webpage in iPhone. In iPhone browser i can see some of the font size looking different compare to other browsers.

Then i was started to analyze about font rendering for Apple from -webkit-text-size-adjust here. then i found some solutions for resolve this issue.

Solutions :

body {
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: none;
}

The above method will render for all device size.

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}

here i used media query for prevent desktop versions for affecting this render concept.

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

And also check you are using zooming level to 1 in initial page load with meta tag.

Leave a Reply

Your email address will not be published. Required fields are marked *