HTML5 Javascript Mobile App not fitting on smaller resolution tablets

Question

I am using the Kendo UI Mobile framework and I have min-width attribute set to 768px. When I pull the page up on a tablet with a smaller resolution, it causes a horizontal scroll. I just want the page to auto zoom out if the resolution is smaller than the set width. In the past I have used this meta tag to fix this: <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

But this is not working.

Any help on how I can have the page auto zoom to fit the devices width would be great

Answer 1

You could also try getting rid of the "minimum width" CSS attribute and just using "width:100%" which would make it fit to any browser size. There is also some speculation about using ems instead of px for width since there are so many different mobile devices and browsers it's basically impossible to plan for every contingency. Unfortunately I can't find the link to the article about using em, but basically if you take away some of those hard lower boundaries you might find it's easier to support a bigger variety of devices.

Also checkout bootstrap . It's a pretty good responsive design package.

Answer 2

Try this for example.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,    minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">