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

Question

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

我面临的问题是在不同的浏览器中返回不同的屏幕宽度.就像我有一个平板电脑(Android 4.0.3),其实际屏幕宽度是800 PX,当我在默认浏览器上运行我的脚本然后它返回准确的屏幕宽度800px,但当我用不同的浏览器打开它然后他们返回不同的宽度,如UC浏览器返回740 PX(ISSUE 2: also when onload function i tried to return screen width on UC browser then it returns screen width as 0px and after page load when i call the same function again then it returns width=740px),当我在Opera Mini上运行脚本然后它返回宽度为441 PX.

请告诉我哪种方法可以检测手持/智能设备的屏幕宽度.所以我可以在屏幕宽度的基础上完美地进行重定向.

TEST的URL:http://radiations3.aiksite.com/home.html

谢谢,

Answer 1

嗯,这听起来像你不应该使用Javascript,而是使用CSS.你有没有看过媒体查询？这是检测屏幕宽度的最跨浏览器方式,然后相应地提供不同的样式.

如果您不想改变样式,而是按照您的说法重定向(如果必须),那么我建议使用以下代码(代表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.