How to lock the screen width for any browser?

Question

Just go to this test website : ltdcoapp.uphero.com , from you smart phone and then slide the screen to see what is on the right and the problem is : that yes the screen slides and shows what I am trying to hide on the right side .

my attempts so far was to use body{overflow-x: hidden;} which only works with desktop browsers though .

can you please tell me what to do to prevent this ?

PS: I'm really not trying to get traffic to the website , but it is the only way to show you the problem easily

@ RobinvdA well the problem is that it has not be hidden , cuz its a slide show . — Writz, Feb 14 '14 at 12:32
You could try to hide it, and only show it when it should slide in? — RobinvdA, Feb 14 '14 at 12:33

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

Have you set a corresponding width with your overflow:hidden property?

Edit: Relative values like 100% for your width won't work (as they'll also contain the right part of the screen). Fix it to absolute pixel values (in this example: 1024px):

body {
    overflow-x: hidden
    width: 1024px
}

It might also help to add the corresponding viewport meta-tags in the header:

<meta name="viewport" content="user-scalable=no, width=1024px, initial-scale=1.0" />

Also, would disabling scrolling altogether be a solution? Disable scrolling in all mobile devices

edited May 23 '17 at 10:33

Community

1
1

answered Feb 14 '14 at 12:27

dominikus

300
2
8

could you try the new suggestions (i.e., viewport, fixing the width)? – dominikus Feb 14 '14 at 12:56
tried that meta line with and without the {width: 1024px} line and nope , none of them worked. is there is an option to prevent only horizontal scrolling ? – Writz Feb 14 '14 at 13:23

score 0 · Answer 2 · answered Feb 14 '14 at 13:49

This one will prevent any touch response , which is kinda useless in my situation .

document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });

This one will be very uselful , but the problem is that it prevents both horizontal and vertical scrolling.

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

This only works for desktop browsers .

body{overflow-x: hidden;}

Tried this a few times and all it do it to prevent user from scaling the page , which is useful at some point , but doesn't solve the problem of scrolling to the right .

<meta name="viewport" content="width=device-width; initial-scale = 1.0;user-scalable=no" />

Thx dominikus , you surely helped .

How to lock the screen width for any browser?

2 Answers2