Tip: when using jquery mobile, changing the device to landscape orientation causes the page to scale larger than 1.0

November 15th, 2011

We are currently working on developing a mobile web shopping cart using jquery mobile and mvc3 using EF code first. Everything is working smoothly but when we change the device to landscape orientation, the page zoomed out.

The viewport meta tag was

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

But looks like there is a bug in mobile safari that is causing the page to zoom to more than 1 when in landscape mode. Therefore the fix is simple. Change the viewport meta tag as shown below.

<meta name=”viewport” content=”width=device-width, initial-scale=1,user-scalable=no,,minimum-scale=1.0, maximum-scale=1.0″>