javascript - Screen Width Issue when using different browsers on Hand HeldSmart Devices - Stack Overflow

admin管理员组

文章数量:1430093

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: .html

Thanks,

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./home.html

Thanks,

• javascript
• android
• jquery
• mobile
• smartphone

Share Improve this question Follow edited Aug 10, 2012 at 0:15 soft genic asked Aug 10, 2012 at 0:08 soft genicsoft genic 2,06644 gold badges2727 silver badges4545 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8 +25

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.

Have you tried that using jQuery and

$(window).width();
$(window).height();

I never had any trouble using these.

本文标签： javascriptScreen Width Issue when using different browsers on Hand HeldSmart DevicesStack Overflow