Hello good people.

I am trying to add a snippet of javascript to the head tag of a mobile site that checks if the visitor is using a PC and if the visitor is viewing the mobile site on a PC I want them to be redirected to the normal site.

The following code snippet is the best I could come up with. I am not too well versed in javascript but I thought I was close.

This code SHOULD check the user's screen width and if it is greater than a certain value then it will promt to the user to go to the normal website.

<!-- User Redirect Start - Detects the user's screen size and determines if they need to be redirected to the normal site. -->
<script type="text/javascript">
    <!--
    //Screen Size Check
    var myFunc = function() {
    if (screen.width > 799) {
    confirm('Your screen resolution is wider than 799 pixels. This makes me think you are viewing this mobile site on a PC. If you are, click OK to be taken to the normal Desktop version of our site. If, I am mistaken then click CANCEL. Thanks.');{
    document.location = "http://www.whitinfo.com";
    }}}
    //else alert('Well, okay, but I still think you are on a mobile device... Enjoy the site.') }
    //-->
</script>
<!-- User Redirect End -->

Now, really what I was is for all of this to happen automatically without having to prompt the user but if I have to involve the user then it's okay.

Also, is there a better way to detect the user's platform?

Recommended Answers

All 4 Replies

Okay so I played around with the code and found a very simple solution.

This seems to be working for me:

<!-- User Redirect Start - Detects the user's screen size and determines if they need to be redirected to the normal site. -->
<script type="text/javascript">
    <!--
    //Screen Size Check and Redirect
    if (screen.width > 799) {
    window.location = "http://www.whitinfo.com"
    }
    //-->
</script>
<!-- User Redirect End -->

I would still like to know if there is a better way to accomplish this goal. Thanks

I would still like to know if there is a better way to accomplish this goal.

There are a few ways to handle this. rather than redirecting users to a mobile set of pages, which requires you to develop twice many pages, you can also use media queries and apply different CSS styles. Also rather than detecting the size of the screen, you may consider checking the browser's user agent. For example, if you detect an iPhone then do something..

You should consider that as mobile devices get better at rendering users may prefer to see the full site instead of the mobile site so you should always give your users the ability to see the full site even if they are on their mobile.

If you want to stick with the redirection, and your solution is working and you are comfortable go with it. Your solution is very basic and doesnt require any additional complexity for a redirection, in my opinion.

Do the redirect serverside,
You use a heap of bandwidth to end the first page, then you do it again, users are not going to be grateful

Google code has a great mobile detector scrript

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.