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

Answer 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

Answer 2

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 .