移动设备上的固定宽度不起作用

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

----------------------------- END OF EDIT ------------ ---------------------

我使用包装器div在我的网站上制作完整的页面背景图像，我想制作固定的包装器div宽度像;

min-width:991px;

如果我在电脑上打开它会很好用，当我将其调整到991px以下时效果也很好。

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

请你解释一下这里有什么问题？

这是我的代码：

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

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

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。希望有所帮助。

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/