Question

I've googled the heck out of this and can't figure it out. Thanks for any help!!

Studiolynch.com. Responsive and Fluid layout. Works perfectly in iphone 5 Safari EXCEPT for the fact that rotating from landscape mode to portrait mode makes the font-sizes smaller than they should be. However, if you initially load the page in Portrait mode, it works perfectly - that is, until you rotate to landscape and then back to portrait. It's easiest to see this happen on the "info" and "hello" pages.

This is the media query I'm using:

@media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:portrait)

Was it helpful?

Solution

Well since it helped, this would prevent Safari from auto adjusting font size on rotation:

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}

Credits

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top