Prevent horizontal scroll on jQuery Mobile

Question

Is there a way to prevent horizontal page scroll on a mobile device preferably with CSS only?

Here's an example: http://jsfiddle.net/YfLst/15/

Update: The following code solves the issue on iOS but the problem remains on Android:

html, body {
    overflow-x: hidden !important;
    position: relative !important;
}

Answer 1

There are different ways to do that:

You could target mobile devices with a special stylesheet

<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css">

And set the body width to 100% and overflow-x: hidden, or even try to position it absolutely

body {
  width: 100%;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

in css.

If by "preventing horizontal scrolling" you mean that your viewport (the area displayed on the mobile screen) is too narrow and should be bigger, you should set the viewport width accordingly in your meta tags

    <meta content="width = 999 (for example)" name="viewport">