javascript - Javascript で画面の幅を検出する

Question

if(screen.availWidth > 850){
    //Do this
} else {
    //Do this   
}

これは私が今持っているものです。私の問題は、誰かがページにズームインした場合、ページの表示方法に影響するため、幅を変更したいということです。

score 3 · Accepted Answer

誰かがブラウザウィンドウのサイズを変更することについてもっと心配すべきではありませんか? 誰もがブラウザーを最大化したままにしているわけではありません。

これをする：

if( (window.innerWidth || document.documentElement.clientWidth) > 850) {
    // do something
}
else {
    // do other thing
}

これがズームを考慮していると確信していますが、それをテストしたことはありません。

score 1 · Accepted Answer

イベントハンドラーをwindow.onresize イベントにバインドします。

window.onresize = function(event) {
    if (screen.availWidth > 850) { ... }
};

jQuery を使用する場合:

$(window).resize(function(){
    if ($(window).width() > 850) { ... }
});

また、レスポンシブデザインを作成する場合は、CSS メディアクエリの使用を検討してください。これは、ユーザーがブラウザーウィンドウをズームまたはサイズ変更した場合にページを自動的に調整し、ユーザーが JavaScript を無効にしている場合にも機能します。

/* CSS */
@media (min-width: 850px) {
    /* style */
}

2 に答える 2