0

我正在使用纯 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);
};

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

我的意思是......如果我使用 as 是否正确

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

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

4

3 回答 3

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

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

于 2012-04-29T08:08:40.353 回答
0

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

if (width>1200) {
  setLocation("layout1200.php"); }
if (width>900) {
  setLocation("layout900.php"); }
setLocation("layout700.php");
于 2012-04-29T08:02:50.130 回答
0

我很想借用Jeremy Keith 刚刚在博客中提到的这种 ( http://adactio.com/journal/5429/ ) 技术，并使用 content 属性来存储相关维度的正确页面 - 然后您可以使用媒体查询以区分各种大小。

您可能需要考虑的其他事情......正在使用 Device Atlas 或 WUFRL 来检测最终用户的浏览器并为他们提供正确的布局以开始 - 重定向对于最终用户来说体验很差，并且在移动设备上尤其慢。

于 2012-04-29T08:37:47.637 回答