How to set viewport meta for iPhone that handles rotation properly?

iphone html viewport
George Armhold picture George Armhold · Aug 4, 2009 · Viewed 177.1k times · Source

So I've been using:

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

to get my HTML content to display nicely on the iPhone. It works great until the user rotates the device into landscape mode, where the display remains constrained to 320px.

Is there a simple way to specify a viewport that changes in response to the user changing the device orientation? Or must I resort to Javascript to handle that?

Answer

Tobias Cohen picture Tobias Cohen · Jun 3, 2010

Was just trying to work this out myself, and the solution I came up with was:

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

This seems to lock the device into 1.0 scale regardless of it's orientation. As a side effect, it does however completely disable user scaling (pinch zooming, etc).

Related questions

Viewport meta tag not working in iPhone and Android

I am using the following html code <!DOCTYPE HTML> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta name="viewport" content="…

Read More
Visual viewport vs Layout viewport on mobile devices

I've just read a nice article on viewport which left me with a couple questions regarding Visual viewport vs Layout viewport on mobile devices. the width and the height of the layout viewport are equal to whatever can be shown …

Read More
Disable Auto Zoom in Input "Text" tag - Safari on iPhone

I made an HTML page that has an <input> tag with type="text". When I click on it using Safari on iPhone, the page becomes larger (auto zoom). Does anybody know how to disable this?

Read More