Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font-size Quirk when Landscape rotates to Portrait - CSS Media Query - iPhone5 Safari

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)

like image 811
skinnysuit Avatar asked Aug 17 '13 21:08

skinnysuit


1 Answers

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

like image 200
TGO Avatar answered Sep 18 '22 15:09

TGO