4
  1. Open the following HTML in Safari on any iPhone:
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width
                                   initial-scale=1.0
                                   user-scalable=no" />
</head>
<body>

<div>Responsive design</div>

</body>
</html>

The things are rendered correctly: we have the same font size in portrait mode (viewport width = 320px for iPhone 5) and landscape mode (viewport width = 568px for iPhone 5).

Correct rendering

  1. Replace the text Responsive design with something like Responsive <!-- really? --> design (or some other tags, or add another simple div). See the difference???

enter image description here

It's rendered as if the viewport was 320px!

It's the most simple example. In some more complicated cases, I created several divs with correct font size on one page, but other divs' font was still incorrect.

No matter what the font is. You can use e.g. div { font: 20px Helvetica; }

Tested on:

  • the latest iOS 9.2.1 (device) — Safari, Chrome and other Safari-based browsers
  • iOS 7.1 / 8.4 / 9.2 simulators — Safari

The same issue... Is it a bug? or a feature? Why it's present there for years?

There's no such problem on iPad.

Dmitry Isaev
  • 3,888
  • 2
  • 37
  • 49
  • I think your meta tag has syntax error, try this and recheck: `` – Aziz Feb 22 '16 at 15:26
  • That's what I started with :) some validators didn't like commas, so I removed them (and tried zillions of `viewport` meta tags since then). I've just checked once again your version, the same problem. – Dmitry Isaev Feb 22 '16 at 19:10
  • 2
    have a look at this answer http://stackoverflow.com/a/3428477/877671 – Aziz Feb 22 '16 at 19:23
  • 1
    Oh, really!!! Consider making it the answer! Thanks so much! (I investigated a bit, this one makes sense, too: http://stackoverflow.com/a/21586341/1289683 if you want to make it user-scalable. Also and I can't see a reason to use media-query, just 100% for all). – Dmitry Isaev Feb 23 '16 at 07:07
  • 1
    Well, I can't take credit for it :p the question is most likely a dupe, however, the interesting thing is that Safari would count comments into the string calculation when it is expected to be ignored, I'd suggest filing a report to the official Safari trac! anyway, glad I could help. – Aziz Feb 23 '16 at 09:13
  • Possible duplicate of [Some font-size's rendered larger on Safari (iPhone)](https://stackoverflow.com/questions/3226001/some-font-sizes-rendered-larger-on-safari-iphone) – joelittlejohn Jul 04 '17 at 08:57

0 Answers0