Question

var a = window.outerWidth;
console.log(a); // 711

JS

media700

根据切换时的javascript计算样式表{{1}}用于711px而不是700px窗口宽度。

Answer 1

假设您的问题是“为什么？”，因为您刚刚发表了上述声明：

来自MDN：

Window.outerWidth获取浏览器窗口外部的宽度。它代表整个浏览器窗口的宽度，包括侧边栏（如果展开），窗口镶边和窗口大小调整边框/句柄。

同样来自MDN：

宽度媒体功能描述输出设备的渲染表面的宽度（例如文档窗口的宽度，或页面框的宽度）打印机）。

11px差异是窗口框架，滚动条等

Answer 2

只需使用innerWidth，您就会看到它们共享相同的值。

一旦达到700px及更低，您将看到使用css媒体查询的文本700px和使用js的背景更改。

在整页视图中调整演示大小。

jsfiddle

$(window).on("resize", function() {
  var innderWidth = $(this).innerWidth();
  $("span").text(innderWidth + "px");
  if (innderWidth <= 700) {
    $("body").css("background-color", "gold");
  } else {
    $("body").css("background-color", "");
  }
});

body {
  margin: 0;
}
p {
  margin: 0;
  background-color: dodgerblue;
  font-size: 3em;
}
@media (max-width: 700px) {
  body::after {
    font-size: 10em;
    content: "700px";
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  Window inner width: <span></span>
</p>

窗口宽度 - css vs javascript

2 个答案: