gpt4 book ai didi

javascript - 如何让我的网站在最小化时显示水平滚动条?

转载 作者:行者123 更新时间:2023-11-28 05:47:59 26 4
gpt4 key购买 nike

所以我做了一个“练习”网站,并没有真正掌握移动优化。相反,我想采用许多网站采用的不同方法。当且仅当网站最小化时,我希望我的网站在页面底部显示水平滚动条。我所有的元素大小都是百分比数量,甚至我所有的 div 都有 100% 高度和宽度的样式。我还希望所有元素的位置都保持不变,没有一个会移动或消失。就我而言,每当我的网站最小化时,都会发生以下情况:

  • 所有内容(图片、文本等)都会缩小以适应较小的屏幕尺寸。
  • 一些元素消失,而另一些元素覆盖它。 (例如,当 Bootstrap 中有一行包含两个“col-md-6”列时,它在正常大小下看起来一切正常,但当最小化时,其中一列变得巨大而另一列捕获了存在。<

  • 文本中的内容扭曲了段落的顺序。

我试过:

overflow-x: auto;
overflow-y: hidden;

作为 body、html 和 div 的样式(分别,而不是同时)但这只会禁用垂直滚动,并且看不到更下方的元素。即便如此,auto overflow-x 也无法解决问题

我也试过:

min-width: 800px;

这会创建水平滚动,但仍然会丢失一些元素,而且水平滚动似乎只够长,这样您就可以滚动查看整个导航栏。

最佳答案

该站点将尝试调整为移动视口(viewport),您可以通过添加以下内容来防止这种情况:

<head>
<title>My Website</title>
<meta name="viewport" content="user-scalable = no">
</head>

或者试试

<head>
<title>My Website</title>
<meta name="viewport" content="initial-scale=1">
</head>

问题可能出在您的视口(viewport)标签上。

您还需要在主体上设置固定宽度。

关于javascript - 如何让我的网站在最小化时显示水平滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37505110/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com