3

I have a web app that I'm trying to run on an iPad 3. When I pull it up, the app is allowing vertical scroll when it shouldn't be. I've gone through the same process with other web apps without any issues, and am not sure what I am missing this time around.

Inside head element of my html, I have the following meta tags:

    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
    <meta name="apple-mobile-web-app-capable" content="yes">

In my CSS:

    html, body { width: 100%; height: 100%; overflow: hidden; }

Trying to debug this issue in weinre and discovered that the document width and height are somehow equal, when height show be much smaller (in landscape).

    $(document).width();  // returns 1024
    $(document).height(); // returns 1024

Searching around SO, other answers have been to supply a viewport meta tag, which I'm already doing. Can someone point me to a solution here?

1
  • have you tried overflow:hidden!important;?
    – Panoply
    Commented May 30, 2014 at 20:54

2 Answers 2

4

It looks to me like you are using too many properties of viewport that might conflict with each other. Apple suggests to set few of them or one and test in isolation as others are automatically inferred.

Bootstrap in its basic template recommends to set only width and initial-scale.

I would be very careful with maximum-scale or anything restricting user's zooming as it forces the user into uncomfortably small (or large) text.

2
  • 1
    I would agree about maximum-scale usually, but it is necessary for what I'm trying to accomplish. The web app is supposed to look and behave like a interactive vehicle infotainment system for a demo. Zooming in would be unexpected and jarring for those we're demonstrating to.
    – Danny
    Commented Jun 4, 2014 at 22:57
  • Why not leaving the user to decide about zooming? If they don't like it they can always zoom back. Commented Jun 5, 2014 at 0:32
1

Okay, for some reason this worked when I removed "height=device-height" from the viewport meta tag. Not sure why since I literally just copy and pasted this tag from another app that worked just fine. Working viewport:

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, target-densitydpi=device-dpi">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.