Question

所以我创建了一个'实践'网站，并没有真正掌握移动优化。相反，我想采取一种不同的方法，许多网站都这样做。我希望我的网站在页面底部显示一个水平滚动条，如果该网站是最小化的话。我所有的元素大小都是百分比数量，甚至我所有的div都有100％高度和宽度的样式。我还希望所有元素在位置上保持不变，没有任何元素可以移动或消失。对于我的情况，每当我的网站最小化时，会发生以下情况：

所有内容（图像，文字等）都缩小以适应较小的屏幕尺寸。
有些元素会消失，而有些则会覆盖它。（例如，当一行有两个来自bootstrap的'col-md-6'列时，它在正常大小下看起来都很好，但是当最小化时，其中一列变得庞大而另一列被占用。
＆LT;文本中的文字扭曲了段落的流程。

我试过了：

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

作为body，html和div的样式（另外，不是一次）但这只是禁用了垂直滚动，并且没有看到进一步向下的元素。即使这样，auto overflow-x thingy也无法解决它

我也尝试过：

min-width: 800px;

并且会创建水平滚动但仍会丢失一些元素，并且水平滚动似乎只有足够长的时间才能滚动以查看整个导航栏。

Answer 1

该网站将尝试调整为移动视口，您可以通过添加以下内容来阻止此操作：

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

您的视口标记可能存在问题。

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

如何使我的网站在最小化时显示水平滚动条？

1 个答案: