如何检测窗口大小然后使用jquery switch语句执行某些操作

我想用jquery检查窗口大小，并根据我想要更改背景图像的不同分辨率。 所以我想以某种方式使用“switch”语句来处理更多情况，但我只是不知道它会是什么样子。 这是我想要的基本结构，但有更多选择：

if ((screen.width>=1024) && (screen.height>=768)) { //do something } else { //do something else } 

谢谢你的帮助。

Answer 1

switch语句不允许你做某些值之间检查数字之类的东西，它不会让你检查多个变量，要么…

因此，对于这种特殊情况，我认为最合适的实际上只是if-elseif语句的列表，就像您已经在前往的路上一样。

在switch进行“范围检查”真的很冗长：

 switch(windowWidth) { case 1: case 2: case 3: case 4: case 5: //Do something if value is less than or equal to 5 break; case 6: case 7: case 8: case 9: case 10: //Do something if value is higher than 5 AND less than or equal to 10 break; ... ... } 

Answer 2

你应该使用：

 $(window).width(); // returns width of browser viewport $(document).width(); // returns width of HTML document $(window).height(); // returns heightof browser viewport $(document).height(); // returns height of HTML document 

然后你可以这样做：

 var width = $(window).width(); var height = $(window).height(); if ((width >= 1024 ) && (height>=768)) { //do something } else { //do something else } 

编辑 – 我不认为在这种情况下使用switch语句是有用的。 switch语句只是if … else表示法的另一种方式，在这种情况下我发现更有用，因为你有多个比较：

 if ((width >= 1280) && (height>=1024)) { //do something } else if ((width >= 1024 ) && (height>=768)){ //do something else } else if ((width >= 800) && (height>=600)){ //do something else }else{ //do something else }