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

Question

我正在尝试制作一个简单的网站，其中标题在浏览器中拉伸 100% 宽，然后将标题下方的内容设置为 1100 像素宽居中。这在桌面浏览器（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 应该有 width: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