page-refresh - ウィンドウが特定の高さにサイズ変更されたときにブラウザ ウィンドウを更新する

Question

ウィンドウのサイズが特定の高さに変更されたときにブラウザ ウィンドウを更新する JavaScript コードを提案できる人はいますか。CSS メディア クエリに似ています。

つまり、ブラウザの最大高さが 700px の場合は更新します。

前もって感謝します。

Answer 1

私は最近似たようなことをしています、そして私が使っている素晴らしいJavaScript関数があります：

var viewportwidth;
var viewportheight;

function resize() {
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
        viewportwidth = document.documentElement.clientWidth,
        viewportheight = document.documentElement.clientHeight
    }

    // older versions of IE

    else {
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }
}

これにより、ブラウザの現在の高さと幅が取得されます。ユーザーがページのサイズを変更していることを確認してresize()関数を呼び出す場合は、単純なJavaScriptコマンドを使用するだけです。window.onresize=resize();

これが基本機能です。ここから、コードにいくつかの変更を加えるのは簡単なはずです。たとえば、幅が700以上になったときにのみページを更新する場合は、次のようなものをresize()関数に追加します。

if(viewportwidth >= 700) {
    window.reload();
}