Prevent iOS from changing text size after orientation changes

If you're developing a responsive site you might have encountered this problem.

Or perhaps you haven't since I'm sure all of this famous templates such as Bootstrap, HTML5 Boilerplate or Normalize.css already have it fixed.

Problem

When viewing your site in an iOS device portrait mode the text looks good but when you change the orientation to landscape it looks bigger.

Basically browsers on smartphones don't display pages using the same algorithms as the browsers rendering pages on desktop.

Solution

Just add the text-size-adjust: 100% property to your CSS to force the text size.


html {
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*