Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

Zoom, Zoom, On Orientation

Fix the zoom when user changes screen orientation

I just wrapped up development on a mobile website and was trying to figure out how to make the site "fill" the width of the screen when the user changes the orientation from portrait to landscape. Now, I could have designed a entirely seperate CSS rule set for the landscape size, but I wanted to keep things simple buy just developing for one "small" size at 320 pixels. Then when the user changes orientation, have that fill the screen. The solution was extremely simple. In my header I had declared the "viewport" meta description as:

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

I just need to remove the initial scale option like so:

<meta name="viewport" content="width=device-width,user-scalable=no">

Magically, the site auto fills on rotation. Awesome.