HTML 5 fixed screen iPad

Question

I can't seem to find the right tag. When the screen is swiped on iPad in certain places the whole screen moves, with the "rubber band" effect I know there is a way to lock the screen, specific to HTML5 and webkit.

using <iframe src="" width="1024" height="724" scrolling="no"></iframe>

seems like a cheap fix, these are my headers.

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />

score 4 · Accepted Answer · edited May 23 '17 at 10:27

4

Try this:

<script>
    // document.body works probably too
    document.ontouchmove = function(e) {
        e.preventDefault();
    };
</script>

Note that this approach disables scrolling on the whole page! Sometimes this might be undesirable. If so, check out How to Disable Rubber Band in iOS Web Apps?

edited May 23 '17 at 10:27

Community

1
1

answered Aug 31 '11 at 19:47

Juho Vepsäläinen

26,573
12
79
105

I thought there might be a new webkit or html5 meta tag that does this. Will try this. – Alex Borsody Sep 01 '11 at 05:04
do not understand what event does, I don't think it's a reserved word. do you pass something through – Alex Borsody Sep 01 '11 at 15:14
"preventDefault" cancels the default action done on the event (standard JS trick). I simplified the solution a bit. See http://stackoverflow.com/questions/500761/stop-uiwebview-from-bouncing-vertically for a related question. – Juho Vepsäläinen Sep 01 '11 at 16:51
I'm surprised this is not a more common fix, the problem is not addressed in any step by step tutorials nor the O'Reilly book. – Alex Borsody Sep 01 '11 at 18:23
This is a fairly common trick in JS coding. Note that it disables two finger "scrolling" on elements with overflow. I doubt many people use that though gives it's quite an obscure feature. – Juho Vepsäläinen Sep 02 '11 at 06:22
And if you use swipe gestures on the site? What then, you ignore them now. – Anthony Graglia Jan 18 '13 at 14:36
@trgraglia Good point. Perhaps there's a better solution around these days. Any ideas? – Juho Vepsäläinen Jan 18 '13 at 15:35
@bebraw Haven't looked into it. There should be an easy solution but I have said that before and spent hours. Sorry, no help here. – Anthony Graglia Jan 29 '13 at 14:09
This is not a good solution because it disables all scrolling on the page. We obviously need to be able to scroll listviews, etc. but do not want the rubber banding effect. – Obi Wan Dec 02 '13 at 16:46
@ObiWan Valid point! Looks like you need to do some magic to ignore certain child elements, http://stackoverflow.com/questions/10357844/how-to-disable-rubber-band-in-ios-web-apps . – Juho Vepsäläinen Dec 03 '13 at 07:09

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

Just in case people don't read the comments on the answer, here is a solution I found when investigating to answers @bebraw 's comment:

How to disable rubber band in iOS web apps?

It is a lot of work for something so small but allows a granular approach on what get the scroll and what doesn't.

edited May 23 '17 at 12:14

Community

1
1

answered Jan 30 '13 at 16:24

Anthony Graglia

5,355
5
46
75

HTML 5 fixed screen iPad

2 Answers2