页面宽度超出移动设备的宽度

Question

我有this website并且效果很好，除了当手机或平板电脑加载它时，页面超出了正常的设备宽度大小。我希望它能够以1.0的比例精确缩放，因此用户无需放大或缩小即可大幅查看内容，也无需向左或向右移动即可查看整个页面。

我查找了div或超出设备大小的任何其他内容，但找不到它。视口设置如下：

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

CSS中的主体是这样的：

body{
   width: 100%;
   max-width: 100%;
}

我在哪里想念家伙？

非常感谢！

Answer 1

你可以将它放在body css中，并结合使用平板电脑/智能手机的媒体查询：overflow-x：hidden;

@media (min-width:320px) and (max-width:768px) {
  body {
    overflow-x:hidden !important;
  }
}

更改当然的值。

Answer 2

如果您的CSS中有更具体的内容，只告诉body为100% width并不能解决您的问题。例如，在您的页脚中，您有此按钮，文本为“Assine nossa newsletter”。看看代码，你会发现你已经定义了div：

@media (max-width: 700px)
.newsletter .red {
width: 360px;
height: 70px;
}

它更具体，因此您的body的CSS被覆盖。尝试在检查员中玩游戏并捕捉需要在移动设备中调整的所有区域。它似乎并不太多，网站看起来很棒！