div不会在移动Chrome / Safari浏览器上填充100％宽度

Question

我正在尝试创建一个简单的网站，其中标题扩展到浏览器的100％宽，然后将标题下方的内容放在1100px宽的中心位置。这在桌面浏览器（Chrome，Safari，Firefox）上运行得非常好。然而，在移动设备上存在问题。我没有做任何响应式CSS，但标题中的图像仍应填充浏览器的宽度。这是我的代码与此标题相关。

HTML：

<div class="featured" style="background-image:url('image.jpg');" onclick="location.href='#';">
    <div class="featured-details">
        <h2><a href="#">Headline</a></h2>
        <p>Some text goes here</p>
    </div>
</div>

CSS：

.featured {
  width: 100%;
  height: 500px;
  position: relative;
  background-size: cover; 
  background-position:center center; 
  overflow: hidden; 
  cursor: pointer;
  box-sizing: border-box;
  z-index: 100;
}

.featured-details {
  color: #ebebeb;
  bottom: 10px;
  width: 1100px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 150;
}

正如您所看到的，它在桌面上运行良好：http://sistestopp.com/uploads/desktop.png

但在移动设备上，标头不是100％：http://sistestopp.com/uploads/mobile.png （页脚正在做同样的事情。）

有什么建议吗？

Answer 1

您的问题出在div.container。其宽度固定为1100px。在移动设备中，分辨率宽度小于该数字，浏览器必须调整大小缩放以显示整个页面然后出现问题。如果您将该行添加到标题中，您将清楚地看到它。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

解决方案非常简单

.container{
    /*width: 1100px;*/
    max-width: 1100px;
}

希望得到这个帮助。

Answer 2

至于我得到你的观点然后解决这个问题。 添加此css与背景图像

background-repeat: no-repeat;
background-size: 100% auto;

并且您的此类.featured-details应该有宽度：100％，否则标题文字会打扰您的标题图片..

这个截图.. 希望我能够提供帮助，否则如果有任何问题，请告诉我..

谢谢：）

Answer 3

最好在这里使用CSS 3 vh和vw。

width:100vw;

  

在以下链接中查看有关vh和vw的更多信息。

http://www.w3.org/TR/css3-values/#lengths

http://snook.ca/archives/html_and_css/vm-vh-units