0

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

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

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

4

3 回答 3

2

你永远不会真正设置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";
于 2013-06-07T15:18:44.057 回答
0

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

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

(1) 浏览器是基于 Chromium 的吗？-->navigator.userAgent.indexOf("Chrome/")>0

(2) 选项卡是否处于非活动状态？-->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的答案被证明与最终解决方案无关，但他的代码很有用。我将我自己的new myWidth赋值代码基于他的 jQueryMath.max代码，同时注意到他的代码non-jQuery web page由于包含 pre-IE7document.body变量而在我身上失败（参见上面代码中的修复）。

于 2013-06-09T23:33:15.450 回答
0

使您的网站具有响应性，这将帮助您覆盖更多与您的规模相符的访问者，因为如今大多数人都使用智能手机浏览网站。

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

于 2013-06-07T15:22:44.250 回答