Some font-size's rendered larger on Safari (iPhone)

css safari mobile-safari font-size
Alex picture Alex · Jul 12, 2010 · Viewed 72.2k times · Source

Are there CSS or other reasons why Safari/iPhone would ignore some font-size settings? On my particular website Safari on the iPhone renders some font-size:13px text larger than font-size:15px text. Does it maybe not support font-size on some elements?

Answer

David Kaneda picture David Kaneda · Aug 7, 2010

Joe's response has some good best practices in it, but I think the problem you're describing centers around the fact that Mobile Safari automatically scales text if it thinks the text will render too small. You can get around this with the CSS property -webkit-text-size-adjust. Here's a sample of how to apply this to your body, just for the iPhone: 

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

Related questions

Why is filter(drop-shadow) causing my SVG to disappear in Safari?

I am developing an app using D3.js. I was sidetracked for a while, and recently came back to it. Today I found that, though it worked fine in the past, the SVG map in the app no longer displays …

Read More
iPhone X Safari fixed button on bottom needs two clicks to respond

We've placed a fixed button on the bottom of the webpage using: It works with Safari and Chrome on all devices. However, on iPhone X, after you scroll down and try to click the button it first shows the bar: …

Read More
Text input field doesn't work in safari

I can't figure out why, but for some reason my text input fields don't work in safari (any version, as far as I can tell). Users can't type into the text boxes. I'm at a loss here, since it works …

Read More