使用JavaScript根據頁面大小

我試圖激活根據一些JavaScript，提供縮放功能不同的屏幕/瀏覽器的分辨率不同的設置，以獲得不同的行爲。我在HTML文檔中包含了下面的腳本，但我認爲它不能正常工作。使用JavaScript根據頁面大小

我在說的是，如果屏幕寬度超過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>

來源

2012-02-07 egr103

你可能想看看[Modernizr的（http://modernizr.com）如果您還沒有。 – Pointy 2012-02-07 14:47:57

'screen.width'是屏幕的寬度，和'document.documentElement.clientWidth'是瀏覽器客戶機的文件的寬度。如果你在桌面上，除非你的瀏覽器是最大化的，否則這些將不相等。 – rgthree 2012-02-07 14:56:01

@rgthree雖然我在說話，但我並沒有說話最大化：如果屏幕寬度和瀏覽器寬度大於1025像素，那麼就渲染這些JS行。 – egr103 2012-02-07 15:03:03

的「如果」語句只是在頁面加載時執行一次。當您調整瀏覽器大小時，它們已經被執行並且不會再執行。

使用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);

來源

2012-02-07 15:45:20

@Domenic此代碼是否可以在頁面加載中工作？ – egr103 2012-02-07 16:03:26

@ egr103是的，除了'$（document）.resize'行之外，這就是'$（document）.ready'行的原因。 – Domenic 2012-02-07 16:15:07

使用JavaScript根據頁面大小

回答

相關問題