Question

我使用普通的JavaScript代码来检测浏览器视口，具体如下：

function setLocation(url) {
   if (window.location.href.indexOf(url) === -1)
      window.location = url;
}

function reloadPage(width) {
    if (width < 701) {
        setLocation("layout700.php");
    } else if (width < 900) {
        setLocation("layout900.php");
    } else {
        setLocation("layout1200.php");
    }
}

var done = false;

function ready() {
    if(!done) {
        done = true;
        reloadPage(document.width);
    }
}

if(window.addEventListener) {
    window.addEventListener('DOMContentLoaded', ready, false);
    window.addEventListener('load', ready, false);
} else if(window.attachEvent) {
    window.attachEvent('onload', ready);
}

window.onresize = function() {
    reloadPage(document.width);
};

我的问题是：如何在此定义宽度范围？

我的意思是......如果我用作

，这是否正确

function reloadPage(width) {
    if (width <= 701 && >= 480) {
        setLocation("layout700.php");
    } else if (width <= 900 && >= 701) {
        setLocation("layout900.php");
    } else {
        setLocation("layout1200.php");
    }
}

如果这不正确，那么正确的语法是什么？请帮忙。

Answer 1

function reloadPage(width) {
    if( width >= 480 ) {
      if (width <= 701 ) {
        setLocation("layout700.php");
      } else if ( width <= 900 ) {
          setLocation("layout900.php");
      } else {
         setLocation("layout1200.php");
      }
   }
}

您的代码有什么变化？
- 在逻辑运算符“＆amp;＆amp;”之后，您没有提到变量名称，这是不正确的。
- 您不需要在第二个条件中检查“width＆gt; 701”，因为如果它是＆lt; = 701，则第一个条件已经满足。
编辑：添加了一个包装器if（）来检查页面是否大于480，因为你没有特定的布局。

Answer 2

从最大的开始到最小的移动。另外，因为setLocation应该立即停止执行，你可以选择省略“其他”的东西。最后，我假设如果宽度小于900，你应该去layout700，即使宽度小于700？对于非常薄的浏览器来说，它似乎最适合。

if (width>1200) {
  setLocation("layout1200.php"); }
if (width>900) {
  setLocation("layout900.php"); }
setLocation("layout700.php");

Answer 3

我很想借用Jeremy Keith刚刚在博客上发表的这种（http://adactio.com/journal/5429/）技术，并使用content属性存储相关维度的正确页面 - 然后你可以使用媒体查询来区分各种尺寸。

您可能想要考虑的其他内容......正在使用Device Atlas或 WUFRL可以检测最终用户浏览器并为他们提供正确的布局 - 重定向对于最终用户来说是一种糟糕的体验，尤其是移动设备的速度慢。

使用纯JavaScript进行浏览器视口检测

3 个答案: