Question

I have a web app built with iweb kit that looks great in Android and iPhones.
The only issue is, when on a mobile, you can grab the screen and move it to the left for a good distance and all you see is white. It does not do this if I move it to the right.
I have my meta tag set such as this <meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport" />.

I also have the body and html css tags set to, margin: 0, padding: 0; width: 100%, height: 100%

I have tried to correct the movement of the app on the screen via javascript but it’s a no go.
Has anyone ran into this before?

Answer 1

Do you have any divs that are position:fixed? I had an overflow problem like this with a menu on a site I designed. Android and iPhone don’t seem to handle fixed positioning the way desktop browsers do.

You also might not want to use “user-scalable=no” if you can avoid it because it can seriously cut down on usability between screen sizes or font sizes for people with disabilities.