HTML – Disable auto scaling on iPhone Safari when switching from portrait to landscape

For iPhone users, when you are viewing a website on Safari and switch the screen orientation from portrait to landscape, you will find that the content of the page will be scaled automatically to fit the screen width. This maybe a nice feature but probably not good for responsive design.

To disable the auto scaling, you can add the following meta on your HTML inside the <head> tag.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />

 

A drawback is the above meta will disable the user scaling as well. For more information, please refer to the reference link below.

Done =)

Reference: StackOverflow – How can I disable MobileSafari’s content scalling on orientation change?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s