窗口宽度 - css vs javascript答案

【问题标题】：window width - css vs javascript窗口宽度 - css vs javascript
【发布时间】：2017-01-16 18:33:27
【问题描述】：

<link rel="stylesheet" href='media700.css' media="screen and (max-width:700px)">

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

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

【问题讨论】：

重复：stackoverflow.com/questions/11309859/…
Google 想出了这个 link 用于 javascript 中的设备和视口大小。也许有用...

标签： javascript css

【解决方案1】：

假设您的问题是“为什么？”，因为您刚刚在上面做了陈述：

来自MDN：

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

同样来自MDN：

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

11px的区别是窗口框架、滚动条等

【讨论】：

【解决方案2】：

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

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

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

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>

【讨论】：