使用浏览器宽度而不是屏幕宽度重定向到移动设备

Question

Im looking to redirect my site to a mobile version by detecting the browser width as oppose to screen.width , is this possible? Here is the code I want to change...

<script type="text/javascript">


<!--
if (screen.width <= 767) {
    window.location = "http://m.mysite.com";
}
//-->
</script>

screen.width doesnt seem to give a reliable response as the resolution is so high on mobiles (I think this is the issue). so then when I set the figure higher it starts loading up the mobile site on Ipads or small desktop browsers.

Id rather not go down the user agent route due as I dont want to have to be checking every site every time a new handset gets released.

Thank you.

Answer 1

I'm not very familiar with this problem, but to help you, I googled a little bit around, I found some articles which may be of use to you, they include PHP, Javascript and some documentation about how & why.

Maybe you'll find it usefull.

1 :

http://twoninewebdesign.com/2012/01/Admin/mobile-device-redirect-for-your-website/

2 :

http://mobithinking.com/guide-device-detection

3 :

http://www.webhostinghub.com/support/website/how-to/mobile-redirect

Sincerly, Harmen Brinkman.

Answer 2

I decided to go for a combination of user agent, screen width and window width. This should make it as accurate as possible.

I used the PHP code from here... http://detectmobilebrowsers.com/ And edited my javascript a little..

<script type="text/javascript">

windowWidth = window.innerWidth;
<!--

if (screen.width <= 767 || windowWidth <= 767) {
    window.location = "http://m.mysite.com";
}
//-->
</script>
<?php //CODE FROM LINK ABOVE ?>