如何在 iPhone 的 html 中禁用水平滚动

Posted 2023-03-11

【中文标题】如何在 iPhone 的 html 中禁用水平滚动

【英文标题】：How to disable horizontal scrolling in html for the iphone

【发布时间】：2017-08-28 17:14:13

【问题描述】：

实际上在我的第二个网站上工作，我希望它能够适用于所有设备，但不幸的是，当我在我的 Iphone 上打开它时，有一个水平滚动条会导致一个白页，我不希望这样。

顺便说一句，我已经使用了meta代码，我停止了缩放

代码：-

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

帮帮我吧..

谢谢！ .

.

.

已编辑

我通过添加此代码解决了问题..

html, body 
    max-width: 100% !important;
    overflow-x: hidden !important;

但是现在还有一个问题

其实按钮前有个空格.. 我不能，不能向上移动按钮

【问题讨论】：

***.com/questions/45892623/…

你在javascript的任何地方都可以调整页面的宽度吗？如果没有，请在您的计算机上使用 google chrome，打开检查器，切换设备工具栏，选择 iPhone，然后查明导致屏幕宽度超出屏幕的元素。

【参考方案1】：

如果您可以接受 CSS 而不是 HTML：

html, body 
    max-width: 100% !important;
    overflow-x: hidden !important;

【讨论】：

但是现在还有一个问题，你可以在主问题中查看！

@AxA 你应该问一个描述问题的新问题

我想..但是网站让我等一个星期

【参考方案2】：

您可以在 CSS 中编写媒体查询。取决于您要查找的 iPhone 尺寸。

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) overflow-x:hidden;

如果您正在寻找不同的 iPhone 尺寸，只需查看那里的宽度并根据需要调整媒体查询。