Screen Width Issue when using different browsers on Hand Held/Smart Devices

Question

I have made a script in which i am detecting the the mobile browser and when its true then the JS function getwidth being called and redirects the visitor to a certain URL on the basis of his device's screen width. I used basic js method of detection i.e screen.width to detect screen width

The problem i am facing is that different screen width is being returning in different browsers.Like I have a tablet (Android 4.0.3) whose actual screen width is 800 PX and when i run my script on it by the default browser then it returns accurate screen width 800px but when I open it with different browsers then they return different widths like UC Browser is returning 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) , when i run script on Opera Mini then it returns width as 441 PX.

Kindly let me know which is the most efficient way to detect the screen width of Hand Held/Smart Devices. So i can make the redirection perfectly on the basis of screen width.

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

Thanks,

Answer 1

Hmm, it sounds to me like you shouldn't use Javascript, but rather use CSS. Have you looked into media queries? This is the most cross-browser way to detect the width of a screen and then offer a different style accordingly.

If you're not looking to change styles, but redirect as you say (if you must), then I'd suggest the following code (on behalf of 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;

This is the shorthand which will create two variables, x and y, which are width and height respectively. Perhaps this is more like what you're looking for, but I'd first suggest checking out media queries and make sure what you're looking to do can't be done with CSS. There's no guarantee that Javascript is enabled in any browser.