使用JavaScript根據頁面大小獲得不同的行為

Question

我試圖基於一些提供縮放功能的JavaScript來針對不同的屏幕/瀏覽器分辨率激活不同的設置。 我在HTML文檔中包含了以下腳本，但是我認為它無法正常工作。

我的意思是，如果屏幕寬度大於1025px並且瀏覽器的寬度大於1025px，則更改zoomWidth和zoomHeight值。

IF語句在哪里出錯？

<script>

if (screen.width >= 1025 && (document.documentElement.clientWidth >= 1025)) {
 $(document).ready(function() {

    $('.jqzoom').jqzoom({
    zoomWidth: 609,
    zoomHeight:756
    });

 });
}

// Start second IF statement

if (screen.width < 1024 && document.documentElement.clientWidth < 1024) {
$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomWidth: 200,
zoomHeight:200
});

});
}
</script>

Answer 1

'if'語句僅在頁面加載時執行一次。 調整瀏覽器大小時，它們已經執行，不再執行。

使用jQuery的調整大小處理程序來檢測調整大小：

 function checkWidth() {
    if (screen.width >= 1025 && (document.documentElement.clientWidth >= 1025)) {
        $(document).ready(function() {
            $('.jqzoom').jqzoom({
                zoomWidth: 609,
                zoomHeight: 756
            });

        });
    }

    // Start second IF statement
    if (screen.width < 1024 && document.documentElement.clientWidth < 1024) {
        $(document).ready(function() {
            $('.jqzoom').jqzoom({
                zoomWidth: 200,
                zoomHeight: 200
            });

        });
    }
}
$(document).ready(checkWidth);
$(document).resize(checkWidth);