ウィンドウ幅 - JavaScriptの対CSS

Question

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

JS

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

スタイルシートmedia700を切り替える瞬間のJavaScript計算は711pxなく700px窓幅に使用さよれ。

Answer 1

窓枠、スクロールバーです。

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>

Answer 2

あなたの質問があると仮定すると、あなただけの上に発言を行っているので、「なぜ？」：MDNから

：

Window.outerWidthは、ブラウザウィンドウの外側の幅を取得します。 ブラウザウィンドウ全体の幅を表します。サイドバー（拡張されている場合）、ウィンドウクロム、ウィンドウのサイズ変更の境界線/ハンドルを含みます。また

MDNから：

幅メディア機能は、ドキュメントウィンドウの幅、または幅と出力装置の描画面の幅（説明プリンタのページボックス）。

11px差は、だけではなく、innerWidthを使用すると、あなたは、彼らが同じ値を共有して表示されますなど、