Javascript 根据显示宽度更改URL

几年前，我创建了一个简单、紧凑的单线输入多搜索网站。后来，我添加了各种web工具、一键式广播电台和其他增强功能

起初，我优化了1024x768屏幕，但尝试适应800x600屏幕。然而，宽屏格式正变得占主导地位，因此我决定通过拆分代码（主要是但不限于CSS更改）来优化一些内容，基于检测最小960像素宽度

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

如果web浏览器已经打开，下面的javascript代码将正确选择适当的URL。但是，当最初打开浏览器时，无论屏幕宽度如何，都会错误地选择“迷你”版本。我尝试使用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";

var myWidth=981
函数vpWidth（）{
返回（myWidth=window.innerWidth | | document.documentElement.clientWidth | | document.body.clientWidth）；
}
vpWidth（）；设置超时（vpWidth，300）；
如果（myWidth您从未实际设置过
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";

函数vpWidth（）{
返回Math.max（document.documentElement[“clientWidth”]、document.body[“scrollWidth”]、document.documentElement[“scrollWidth”]、document.body[“offsetWidth”]、document.documentElement[“offsetWidth”]；
}
var myWidth=vpWidth（）；
如果（我的宽度）
让你的网站更具响应性，这将有助于你覆盖更多与你同样大小的访问者，因为现在大多数人都使用智能手机浏览网站

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

在找到解决方案的过程中需要两个检测步骤：

<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>

（1） 浏览器是否基于Chrome？-->
navigator.userAgent.indexOf（“Chrome/”）0

（2） 选项卡是否处于非活动状态？-->
document.webkitVisibilityState==“隐藏”

测试URL:

我的工作解决方案：

<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>


var myWidth=981
var dde=document.documentElement；
var tabVisible=document.webkitVisibilityState；
如果（！document.documentElement）dde=document.body；//修复IE6及更早版本
myWidth=Math.max（dde.scrollWidth、dde.offsetWidth、dde.clientWidth）；
如果（（navigator.userAgent.indexOf（“Chrome/”）在哪里设置myWidth？经过更多测试，在浏览器启动时错误/不必要的重定向到“mini.php”似乎仅限于Google Chrome和基于Chrome的浏览器，如Opera Next、SRware Iron和Torch。只有在打开“最后一个选项卡焦点”的浏览器时才会发生这种情况不是我们的主题网站gooplusplus.com，而是其他一些网站，比如stackoverflow.com（修改了浏览器测试结果）。事实上，我做了，但试图简化此帖子的代码。（我的错。）我将更新并更改它。没关系，我只是用jQuery内部用于检查视口宽度的计算编辑了我的答案。不幸的是，这似乎不起作用。我添加了一些alert（）语句进行测试。alert A[在新的vpWidth（）函数之后]通过。alert B[在myWidth=vpWidth（）之后；语句]失败。顺便说一句，如果相关的话，这个PHP HTML文件不会调用jQuery。对document.body.XXX的引用导致函数分配失败。我测试了这个替代代码，它可以工作。但是，我仍然需要在启动浏览器时测试它是否工作。
var db=document.body；var dde=document.documentElement；
myWidth=（document.body）？Math.max（db.scrollWidth，db.offsetWidth，db.clientWidth）：Math.max（dde.scrollWidth，dde.offsetWidth，dde.clientWidth）；