Safari: incorrect viewport calculation for font sizes

Question

Safari: incorrect viewport calculation for font sizes

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>

Doing it right: we have the same font size in portrait mode (viewport width = 320 pixels for iPhone 5) and landscape mode (viewport width = 568 pixels for iPhone 5).

Replace the text Responsive designwith something like Responsive  design(or some other tags, or add another simple div). See the difference.

It is displayed as if there were 320 pixels in the viewport!

This is the simplest example. In some more complex cases, I created several divs with the correct font size on one page, but the font of the other divs was still incorrect.

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

Tested: