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

So I made a 'practice' website and haven't really grasped mobile optimization. Instead, I want to take a different approach which many websites do do. I want my site to display a horizontal scrolling bar on the bottom of the page if and ONLY if the site is minimized. All my element sizes are in percentage quantities and even all my divs has a style of 100% height and width. I also want all the elements to stay the same in position and none to shift around or disappear. For my case, whenever my site is minimized the following happens:

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

Everything (images, text, etc) shrinks to fit in the smaller screen size.

一切(图像,文本等)缩小以适应较小的屏幕尺寸。

Some elements disappear while others overlay it. (For example, when there is a row with two 'col-md-6' columns from bootstrap, it looks all fine at normal size, but when minimized, one of the columns becomes enormous and the other column seizes to exist.

一些元素消失而另一些元素覆盖它。 (例如,当一行有两个来自bootstrap的'col-md-6'列时,它在正常大小下看起来都很好,但是当最小化时,其中一列变得巨大而另一列被占用存在。

< br >s within text distort the flow of the paragraphs.

文本内部扭曲了段落的流程。

I have tried:

我试过了:

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

as a style for body, html, and div(separately, not at once) but that just disables the vertical scrolling and elements further down are not seen. And even then, the auto overflow-x thingy doesn't solve it

作为body,html和div的样式(另外,不是一次),但只是禁用垂直滚动,并且看不到向下的元素。即使这样,auto overflow-x thingy也无法解决问题

I have also tried:

我也尝试过:

min-width: 800px;

and that creates the horizontal scroll but still some elements are lost, and it seems the horizontal scroll is only long enough ONLY so that you can scroll to view the entire nav bar.

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

1 个解决方案

#1

The site will be trying to adjust to a mobile viewport, you can prevent this by adding:

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

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

Or try

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

The problem is likely with your viewport tag.

您的视口标记可能会出现此问题。

You will also need to set a fixed width on the body.

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

#1