禁用移动网页上的水平滚动

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;"/>

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'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;
}

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

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

Simply add this CSS:

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

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.

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">

Just apply width:100%; to body

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%;
}

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%;
}

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)

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">

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;
}