Responsive issue; text renders incorrect size until orientation changes?

Question

I'm experiencing something rather odd, in that this page renders the text incorrectly sized on initial load, however when the orientation is changed from portrait to landscape and back again it renders fine.

I've tried adding in various properties for the viewport meta tag, however, this doesn't seem to have any effect.

My current viewport meta tag has the following properties;

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

This behaviour happens on iPhone (5S; iOS7), haven't tested across any other devices. I'm really puzzled as to what the source of the issue could be?

If anyone could suggest any additional viewport properties or other ideas on how this may be fixed it would be greatly appreciated.

Answer 1

Try adding this into your css:

-webkit-text-size-adjust:none;