Question

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

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>

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

即使调整浏览器窗口大小，如何设置标题宽度与显示器屏幕宽度相同？

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

对于非移动平台，是否有device-width的类似内容？

Answer 1

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

screen.width

（http://www.w3schools.com/jsref/prop_screen_width.asp）然后你可以用它来用javascript设置容器的宽度。

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

Answer 2

您可以使用javascript管理屏幕尺寸

检查此示例

<script>
var txt = "";
txt += "<p>Total width/height: " + screen.width + "*" + screen.height + "</p>";
txt += "<p>Available width/height: " + screen.availWidth + "*" + screen.availHeight + "</p>";
txt += "<p>Color depth: " + screen.colorDepth + "</p>";
txt += "<p>Color resolution: " + screen.pixelDepth + "</p>";

document.getElementById("demo").innerHTML = txt;
</script>

Answer 3

只需使用width: auto即可。它会根据填充调整宽度。

Answer 4

请在不使用javascript的情况下尝试此操作

 div
    {
        width: 100vw; 
        height: 56.25vw; 
        background: pink;
        max-height: 100vh;
        max-width: 177.78vh; /* 16/9 = 1.778 */
        margin: auto;
        position: absolute;
        top:0;bottom:0; /* vertical center */
        left:0;right:0; /* horizontal center */
    }

或

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

Answer 5

首先使用元标记作为空洞html主体，然后您可以使用：100％。

Answer 6

我会用：

width: 100vw; display: inline-block;

或者我会尝试display: flex;检查您没有任何地方（在父母身上）position: relative。

Answer 7

没有javascript就行不通，但它只有三行...... 这是一个小提琴：https://jsfiddle.net/0yL3fbyf/

我得到屏幕宽度，将其放入变量并将“px”添加到该数字：

var x = screen.width + 'px';

然后我将该变量指定为标题width。由于某些原因getElementsByTagName("header")无效，我给标头提供了ID：

var y = document.getElementById('my_header');
y.style.width = x;

Answer 8

没有jquery / javascript可能很难匹配你需要的元素的宽度/高度。选项是在设备屏幕宽度/高度上设置100％或硬编码。感谢。

Answer 9

vw（视口宽度），vh（视口高度），vm（最小视口）等相对值非常适合屏幕等设备，其设备大小和分辨率未知或可能会发生变化。

px，em＆amp; ％是可用于屏幕设计的值。尝试不同的值，看看。感谢。

Answer 10

将标题<!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>My app</title> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" src = "phonegap.js" > </script> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=yes"> <link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="Mobile_style.css"><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <link href='https://fonts.googleapis.com/css?family=Quicksand:700' rel='stylesheet' type='text/css'> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" src = "phonegap.js" > </script> <script type="text/javascript" charset="utf-8"> function onBodyLoad() { document.addEventListener("deviceready", onDeviceReady, false); } function onDeviceReady() { // do your thing! } </script> <script type="text/javascript"> window.onload = function() { MY JS CODE } </script> </head> <body onload="onBodyLoad()"> MY HTML </body>添加到标题中，因为它可以让您的代码根据使用它的屏幕灵活调整高度。因此，现在您使用任何设备，您的标题高度将相应地自动调整。

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

10 个答案: