浏览器窗口的检测与普通的JavaScript

我使用普通的JavaScript代码来检测浏览器窗口和如下：浏览器窗口的检测与普通的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"); 
    } 
}

使用。如果这是不正确那么什么是正确的语法？请帮助。

来源

2012-04-29 Vikram Rao

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

的是从你的代码改变了吗？
- 在逻辑运算符“& &”之后，您没有提到变量名称，这是不正确的。
- 在第二种情况下，您不需要检查“宽度> 701”，因为如果它是< = 701，则第一个条件已经满足。
编辑：添加一个包装if（）检查页面大于480，因为你没有任何特定的布局。

来源

2012-04-29 08:08:40 KBN

感谢您的帮助。 – 2012-04-29 08:11:25

@Vikram，是否解决了这个问题？ – KBN 2012-04-29 08:13:26

只需结账...即将发布结果。 – 2012-04-29 08:15:31

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

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

来源

2012-04-29 08:02:50 DanRedux

感谢您的修复。我的默认大小是1200像素，最高960像素，我通过CSS和流体布局进行控制。但对于平板电脑，iPhone手机，Android手机和更小的屏幕，我想要服务器的特定布局和内容。我实际上是零的Javascript，这就是为什么我有问题理解正确的语法。您能否以正确的语法帮助我，具体取决于我在此评论中提到的内容。 – 2012-04-29 08:09:53

我很想借用这个（http://adactio.com/journal/5429/）技术，Jeremy Keith刚刚博文讨论并使用content属性来存储相关维度的正确页面 - 然后您可以使用媒体查询来区分不同大小。

你可能想要考虑的其他东西......正在使用Device Atlas或 WUFRL来检测最终用户浏览器并提供正确的布局来开始 - 重定向对于最终用户来说是糟糕的体验，特别是对移动的慢。

来源

2012-04-29 08:37:47

感谢您的建议，但情况是这样的：1.我正在开发一个opem-source模板框架，它必须有一系列选项来为所有类型的浏览器和完美服务尽可能靠近。 2.所有浏览器都不支持媒体查询，特别是旧的浏览器。来自“简明英汉词典”我不是在这里重新引导访问者。我实际上根据他的设备服务于不同的布局。最后，我认为Device Atlas是一个商业解决方案，如果我没有错的话。 – 2012-04-29 10:15:02

您的setLocation方法实际上是客户端重定向。如果您应用了合理的默认值，那么即使不支持媒体静态的浏览器也能正常工作 - 就像Bryan Rieger所说的那样“媒体查询的缺失实际上是您的第一个媒体查询” – 2012-04-29 10:24:01

浏览器窗口的检测与普通的JavaScript

回答

相关问题