javascript - 在手持/智能设备上使用不同浏览器时的屏幕宽度问题

Question

我制作了一个脚本，我在其中检测移动浏览器，当它为真时，将调用 JS 函数 getwidth 并根据访问者的设备屏幕将访问者重定向到某个 URL宽度。我使用了基本的 js 检测方法，即 screen.width 来检测屏幕宽度

我面临的问题是在不同的浏览器中返回不同的屏幕宽度。就像我有一个实际屏幕宽度为 800 PX 的平板电脑 (Android 4.0.3)，当我在默认浏览器上运行我的脚本时然后它返回准确的屏幕宽度 800px 但是当我用不同的浏览器打开它时它们会返回不同的宽度，比如 UC 浏览器返回 740 PX(问题 2:当我尝试返回屏幕时 onload 函数UC 浏览器上的宽度然后它返回屏幕宽度为 0px 并且在页面加载后当我再次调用相同的函数然后它返回 width=740px) ，当我在 Opera Mini 上运行脚本然后它返回宽度为 441 PX.

请告诉我哪种检测手持/智能设备屏幕宽度的最有效方法。所以我可以根据屏幕宽度完美地进行重定向。

要测试的 URL:http://radiations3.aiksite.com/home.html

谢谢，

Answer 1

嗯，在我看来你不应该使用 Javascript，而应该使用 CSS。你调查过media queries吗？ ？这是检测屏幕宽度然后相应地提供不同样式的最跨浏览器的方法。

如果您不想更改样式，而是按照您所说的进行重定向(如果必须的话)，那么我建议使用以下代码(代表 Andy Langton ):

var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;

这是将创建两个变量 x 和 y 的简写，它们分别是宽度和高度。也许这更像是您正在寻找的东西，但我首先建议检查媒体查询并确保您想要做的事情不能用 CSS 完成。无法保证在任何浏览器中都启用了 Javascript。