移动端固定宽度无效

Question

解决我的问题的编辑：

html {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    position: relative;
}
body {
    margin: 0;
    width: 100%;
    height: 100%;
    letter-spacing: -.2px;
    font-kerning: normal;
    position: relative;
    overflow-x: auto;
}
.wrapperAudit {
    min-height: 100%;
    width: 100%;
    position: absolute;
    background-color: #cbdcc6;
    min-width: 991px;
}

我在我的网站上使用包装器div来制作全屏背景图像，我想要固定包装器div的宽度，如下所示：min-width:991px; 如果我在电脑上打开它，它可以很好地工作，如果我将其调整为小于991像素，它也可以很好地工作。

但是当我在移动设备上打开网站时，它看起来像这样：

请问这里有什么问题吗？

以下是我的代码：

html {
    width: 100%;
    height: 100%;
}
body {
    margin: 0;
    width: 100%;
    height: 100%;
    letter-spacing: -.2px;
    font-kerning: normal;
}
.wrapper{
    min-height: 100%;
    width: 100%;
    position: relative;
    background-color: #cbdcc6;
    min-width: 991px;
}

- Tolga Kısaoğulları

---

min-width并不意味着是固定的。 - Germano Plebani

在body中添加以下内容： { min-width:1050px; } - Vasim Shaikh

你的问题有点令人困惑。你是否想知道为什么.wrapper div（在你的截图中是绿色的）没有扩展到移动视口（在你的截图中是白色的）的整个高度？ - unpollo

我忘记添加 '<meta name="viewport" content="width=device-width, initial-scale=1.0">'，现在绿色部分没问题了，但白色部分仍然存在。 - Tolga Kısaoğulları

Answer 1

你需要告诉它寻找移动设备。请在HTML顶部包含视口元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design?hl=en

- blairmeister

---

我已经写了"<meta name="viewport" content="width=device-width">"，谢谢。但是我现在有类似的问题，如果我向下滚动仍然有空白处。 - Tolga Kısaoğulları

Answer 2

为什么不将 wrapper 设为覆盖整个页面的 fixed div 呢？

例如，在页面的 body 中，可以这样实现：

<div id="wrapper"></div>

在你的CSS中，

#wrapper
{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -99999;
  background-color: green; /* modify this to suit you */
}

z-index: -99999 是为了确保背景保持在所有其他元素之下。只需确保此值小于页面中所有其他元素的 z-index 值。

这里有一个 JSFiddle。希望能帮到你。

- pradeepcep

---

谢谢您的回答，但这个解决方案并没有起作用。实际上，我正在使用背景图像而不是背景颜色，如果我将wrapper的位置固定，我无法左右滚动它，尽管它包含内容。 - Tolga Kısaoğulları

它也适用于background-image。如果您想要一个可滚动的包装器，那么只需使用另一个div来显示背景即可。请查看答案中的JSFiddle。有关使用背景图像和可滚动包装器的演示，请参见此JSFiddle：https://jsfiddle.net/guy5mmbn/5/ - pradeepcep

我觉得我错误地解释了我的问题，我不需要一个固定的背景。我只需要使固定包装器宽度来阻止在991像素以下缩放网站，但如果我使用“min-height: 991px”，它会表现出这样的白色空间，再次感谢您的关注，我希望我能找到一个解决方案或者我可以尝试更改我的代码。 - Tolga Kısaoğulları

Answer 3

CEP提到，只需使用固定的div会更有意义。除了他的答案之外，另一种选择是使用VH和VW单位，利用观众高度和宽度的100%。

html

<div id="bground"></div>

<div id="first-div">
Hi, I'm a preety cool div who can't spell!
</div>

CSS

#bground
{
  background-color: green;
  position: fixed;
  z-index: -1;
  height: 100vh;
  width: 100vw;
}

#first-div
{
  background-color: white;
  padding: 2em;
}

https://jsfiddle.net/sLm1k410/

- A1raa