html - 如何设置元素的宽度等于设备宽度？

Question

我希望我网站的页眉与显示器屏幕一样宽。我试过设置 width: 100%、width: vw 和 width: device-width。所有这些的问题是，当我调整浏览器窗口大小时，标题的宽度等于当前视口(viewport)的宽度，而不是设备宽度。代码如下:

body {
  height: 100vh;
  width: 100vw;
}
* {
  margin: 0;
  padding: 0;
  font-family: courier;
  color: white;
}
header {
  display: block;
  height: 150px;
  width: device-width;
  background-color: #666633;
  text-align: center;
}
header h1 {
  font-size: 2em;
  color: white;
}
nav {
  width: auto;
  margin: auto;
  margin-top: 20px
}

<header>
  <h1 class="heading"> Syco Scientist Records </h1>
  <nav>
    <ul>
      <li><a href="anupamindex.html" class="active">Home</a>
      </li>
      <li><a href="ourwork.html">Our Work</a>
      </li>
      <li><a href="testimonials.html">Testimonials</a>
      </li>
      <li><a href="projects.html">Projects</a>
      </li>
      <li><a href="contact.html">Contact Us</a>
      </li>
    </ul>
  </nav>
</header>

如您所见，调整浏览器窗口大小时没有滚动选项。如果我给出了以像素为单位的宽度，那么导航栏就不会折叠并且在向右滚动时可以看到。

• How do set the width of header same as monitor screen width even when the browser window is resized?

我认为这是可能的唯一方法是使用 @media 媒体查询，它根据监视器宽度为标题设置不同的宽度。

• Is there any analogous of device-width for non-mobile platforms?

Answer 1

为了获得屏幕尺寸而不是浏览器宽度，您需要 javascript。你可以使用

screen.width 

( http://www.w3schools.com/jsref/prop_screen_width.asp )然后您可以使用它通过 javascript 设置容器的宽度。

注意:操作系统之间可能存在一些差异