javascript - 根据显示宽度更改 URL

Question

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

起初，我针对 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";

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

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