javascriptで横幅による処理の分岐を行いたい場合の注意

cyrus07424cyrus07424

javascriptで横幅による処理の分岐を行いたい場合には、横幅を適切に取得しないと意図した処理とならない場合がある。

CSSのメディアクエリで判定される横幅と同じ横幅は、window.innerWidthで取得できる。
jQueryで$(window).width()などとするのは誤りであるため注意。

実際の分岐処理の例。

var width = window.innerWidth;
if(width < 768){
    // CSSで@media (max-width: 767px)を指定したのと同等の横幅での処理
}else{
    // CSSで@media (min-width: 768px)を指定したのと同等の横幅での処理
}