Question

几年前我创建了hobby site，这是一个方便紧凑的单行录入多搜索网站。后来，我添加了各种网络工具，一键式广播电台和其他增强功能。

起初，我针对1024x768屏幕进行了优化，但尝试容纳800x600屏幕。然而，宽屏幕格式正在变得占主导地位，所以我决定通过分割代码来优化一些事情会更好，主要是但不限于基于检测到最小960像素宽度的CSS更改。

小于960像素宽的屏幕宽度重定向到“mini.php”版本。

如果网络浏览器已经打开，则下面的javascript代码会正确选择相应的网址。但是，在最初打开浏览器时，无论屏幕宽度如何，都会错误地选择“迷你”版本。我尝试使用setTimeout（）延迟检测而没有效果。

var myWidth = 981

function vpWidth() {
return( myWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth );
}
vpWidth(); setTimeout(vpWidth,300);

if(myWidth<960) document.location.href="http://www.gooplusplus.com/mini.php";

谁可以提供始终有效的解决方案，而不仅仅是在浏览器已经打开时？

Answer 1

你永远不会真正设置myWidth。另外，我用jQuery如何在内部获取宽度来替换你的函数。

function vpWidth() {
    return Math.max(document.documentElement["clientWidth"], document.body["scrollWidth"], document.documentElement["scrollWidth"], document.body["offsetWidth"], document.documentElement["offsetWidth"]);
}
var myWidth = vpWidth();

if(myWidth<960) document.location.href="http://www.gooplusplus.com/mini.php";

Answer 2

让您的网站快速响应，这将帮助您覆盖更多数量的访问者，因为大多数人现在都使用智能手机浏览网站。

http://alistapart.com/article/responsive-web-design

Answer 3

在浏览器启动时进一步测试此宽度错误表明它似乎仅限于基于Chromium的浏览器，其中目标选项卡不是活动的。在这种情况下，即使窗口实际上已最大化，Google Chrome也会从非最大化窗口大小获取窗口宽度结果。

解决问题的方法需要两个检测步骤：

（1）是基于Chromium的浏览器？ - ＆GT; navigator.userAgent.indexOf("Chrome/")>0

（2）标签是否处于非活动状态？ - ＆GT; document.webkitVisibilityState == "hidden"

测试网址：http://www.gooplusplus.com/chrome-bug.html

我的工作解决方案：

<script>

var myWidth = 981 

var dde = document.documentElement;

var tabVisible = document.webkitVisibilityState;

if(!document.documentElement) dde = document.body; // fix for IE6 and earlier 

myWidth = Math.max(dde.scrollWidth,dde.offsetWidth,dde.clientWidth);

if( ( navigator.userAgent.indexOf("Chrome/")<0 || tabVisible!="hidden" ) && myWidth < 960 ) 
    document.location.href="http://www.gooplusplus.com/mini.php";  

</script>

上述技术解决了这个问题。尽管 @theJoeBiz 答案与最终解决方案无关，但他的代码很有用。我在他的jQuery new myWidth代码上创建了我自己的Math.max分配代码，同时注意到由于包含了IE7之前的non-jQuery web page变量（{em}，我的document.body代码失败了>参见上面代码中的修复）。

根据显示宽度更改URL

3 个答案: