如何避免使用响应式网页设计在移动网页上进行横向滚动？ [英] How to avoid horizontal scroll on mobile web with responsive web design?

问题描述

我有一个适应性强的网络应用程序。为了避免水平滚动，我写了以下CSS代码：

  html {
 overflow-x：hidden; } 
  

这在桌面设备上正常工作，但不适用于移动设备。如果我在移动设备上显示该应用程序，该应用程序适应精细。问题是当我从右到左滚动。页面移动一点。

页面不会在所有移动设备上滚动设备。我已在两个设备上尝试使用相同版本的Android，并且只能滚动其中一个设备。

解决方案

所有的paddings。

如下所示：
http://jsfiddle.net/wzZ3W/

代码

 < div id =fillX> 
< div id =childXFill> 
< / div> 
< / div> 
 
 #fillX 
 {
 background：red; 
 width：100％; 
 opacity：0.5; 
} 
 
 #childXFill 
 {
 background：blue; 
 width：100％; 
 padding：10px; 
 opacity：0.5; 
} 
  

同时检查跨页面元素的左，例如。 http://jsfiddle.net/s7zrukj2/2/

此外，使用CSS重置。

---

如果您不想使用 overflow：hidden 你应该也应该在body元素上设置它。像这样

  body，html {overflow-x：hidden; } 
  

虽然事物溢出表示响应式设计中有错误，而是防止移动用户看不到某些内容。

I've an adaptable web application. To avoid horizontal scroll I've written the following CSS code:

html {
    overflow-x: hidden; }

This works fine on desktop, but not on mobile. If I display the app on a mobile device, the app adapts fine. The problem is when I do scroll from right to left. The page moves a bit. I want the page to not move horizontally.

Edit:

The page doesn't scroll on all mobile devices. I've tried it on two devices with the same version of Android and it only scrolls on one of the devices.

解决方案

Check all the paddings. If you add padding to something with width set to 100% it will go outside the parent.

Shown here http://jsfiddle.net/wzZ3W/

Code

<div id="fillX">
    <div id="childXFill">
    </div>
</div>

#fillX
{
    background:red;
    width:100%;
    opacity:0.5;
}

#childXFill
{
    background:blue;
    width:100%;
    padding:10px;
    opacity:0.5;
}

Also check negative left and right margins on elements that span the page. E.g. http://jsfiddle.net/s7zrukj2/2/

Also, use a CSS Reset.

---

If you wan't to use overflow: hidden you should probably set it on the body element too. Like so

body, html { overflow-x:hidden; }

Although the fact that something is overflowing indicates an error in your responsive design and you should try and fix it instead to prevent something not being visible to a mobile user.

这篇关于如何避免使用响应式网页设计在移动网页上进行横向滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！