disable horizontal scroll on mobile web

I'm having an issue where hori开发者_如何学JAVAzontal scrolls appear on certain phones for my site. I tried to put overflow-x: hidden but it's not working. The width is auto, so that it will actually automatically resize the web to suits the screen size. All other phones are fine except when viewed in blackberry, nokia e52, and Windows mobile, the horizontal scroll will appear.

Any advice?

Simply add this CSS:

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

I've found this answer over here on stackoverflow which works perfectly for me:

use this in style

body {
    overflow-x: hidden;
    width: 100%;
}

Use this in head tag

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

A slight addition of mine in case your body has padding (to prevent the device from scaling to the body content-box, and thus still adding a horizontal scrollbar):

body {
    overflow-x: hidden;
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

For me, the viewport meta tag actually caused a horizontal scroll issue on the Blackberry.

I removed content="initial-scale=1.0; maximum-scale=1.0; from the viewport tag and it fixed the issue. Below is my current viewport tag:

<meta name="viewport" content="user-scalable=0;"/>

Try this code,overflow will help to remove scrollbar.You can use it also for any div which is scrolling.

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

This works for me across all mobile devices in both portrait and landscape modes.

<meta name="viewport" content="width=device-width, initial-scale = 0.86, maximum-scale=3.0, minimum-scale=0.86">

I know this is an old question but it's worth noting that BlackBerry doesn't support overflow-x or overflow-y.

See my post here

I use this to make the user still able to zoom in and out:

<meta name="viewport" content="width=device-width;" />

try like this

css

*{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -msbox-sizing: border-box;
}
body{
   overflow-x: hidden;
}
img{
   max-width:100%;
}

This is the code that worked perfectly in my Angular app that didn't show 2 vertical srollbars in desktop mode and didn't show the horizontal scollbar in mobile mode which was a result of trying the two top voted answers.

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

In this case edit your meta viewport

Try this code below:

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

Just apply width:100%; to body

Depending on box sizing width 100% might not always be the best option. I would suggest

 width:100vw;
 overflow-x: scroll;

This can be applied in the context of body, html as has been suggested or you could just wrap the content that is having an issue in a div with these settings applied.

For my project leaving everthing as is and only adding this worked:html{ overflow-x: hidden;} (Problem was in android 8 phones browsers)

I had the same issue. Adding maximum-scale=1 fixed it:

OLD: <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

NEW: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

P.S. Also I have been using commas between values. But it seems to work with semi-colon as well.