Question

我的元素是浏览器窗口宽度的三倍（它需要），我似乎无法禁用在移动设备上横向滚动的功能。

我发现很多线程都有类似的问题，几乎每个人都建议添加

max-width:100%; and overflow-x:hidden;

到我所做的正文和/或html标签，或者添加或多或少类似于

的内容

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

（我几乎试过了我遇到的每一个变种）这些解决方案都没有起作用

body
{
    max-width: 100vw;
    overflow-x: hidden;
    position: absolute;
    height: auto;
    padding: 0px;
    margin: 0px;
}

有人知道如何解决这个问题吗？感谢。

Answer 1

我将您网站的HTML复制到我的本地服务器，这似乎有效。如果您的情况有所不同，请告诉我。

在标题中，添加此项。我们基本上告诉移动设备禁用放大和缩小，并将比例设置为1：

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

为包含#main div：

的div添加此样式

<style type="text/css">
  #container {
    overflow-x:hidden;
    width:100%;
  }
</style>

在我的某个移动设备上

更新：，这还不够，所以我不得不使用以下样式：

<style type="text/css">
  #container {
    overflow-x:hidden;
    width:100%;
    position:relative;
    top:7vh;
    height:53vh;}
  #main {
    top:0;
  }
</style>

现在使用div #main包裹您的#container div。由于上一步中添加了CSS，因此应隐藏任何超过浏览器宽度100％的内容。

<div id="container">
  <div id="main">
    .
    .
    .
  </div>
</div>

禁用移动设备上的水平滚动（或滚动单击）

1 个答案: