Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 540
Alex Avatar asked Oct 15 '22 02:10

Alex


People also ask

Why are my letters so big on Safari?

You can increase or decrease just the font size of pages that you view in Safari on macOS Sierra. Safari will remember your settings until you clear your History. Or you can go to the View menu and hold down the Option key while you select Make Text Bigger or Make Text Smaller.

Why are my words so small on Safari?

In the Settings app, scroll down to the list of apps and select Safari. On the Safari screen, scroll to the bottom and select Page Zoom. Listed at the top of the Page Zoom screen are websites you have previously adjusted the zoom on. You can edit the zoom level for those websites here if you wish.

How do I get my iPhone font back to normal size?

Go to Settings > Display & Brightness, then select Text Size. Drag the slider to select the font size you want.


2 Answers

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;
  }
}
like image 270
David Kaneda Avatar answered Oct 17 '22 16:10

David Kaneda


Use 100% instead of None.

normalize.css includes this

like image 16
user3276706 Avatar answered Oct 17 '22 16:10

user3276706