html – 禁用移动设备上的水平滚动(或滚动点击)

概述我有一个元素是浏览器窗口宽度的三倍(它需要),我似乎无法禁用在移动设备上横向滚动的功能. 我发现很多线程都有类似的问题,几乎每个人都建议添加 max-width:100%; and overflow-x:hidden; 我做的身体和/或html标签或添加或多或少类似的东西 <meta name="viewport" content="width=device-width, initial-scal 我有一个元素是浏览器窗口宽度的三倍(它需要),我似乎无法禁用在移动设备上横向滚动的功能.

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

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

有没有人知道如何解决这个问题？谢谢.

解决方法 我将您网站的HTML复制到我的本地服务器,这似乎有效.如果您的情况有所不同,请告诉我.

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

<Meta name="vIEwport" content="wIDth=device-wIDth,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 #container包装你的#main div.由于在上一步中添加了CSS,因此应隐藏任何超过浏览器宽度100％的内容.

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

总结

以上是内存溢出为你收集整理的html – 禁用移动设备上的水平滚动(或滚动点击)全部内容，希望文章能够帮你解决html – 禁用移动设备上的水平滚动(或滚动点击)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。