Question

I designed a webpage and a mobile version of the same page (using jQuery Mobile).

I have javascript code that detects if the user is using a mobile device, and then redirects to the mobile site (mobile.html).

But when the user tries to go from the mobile site to the desktop or full site it brings up the page, but doesn’t look right… it’s kind of zoomed in and displaced when looking on a Mobile Device.

************The Javascript to detect mobile device************

var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
 if (mobile) { 
    document.location = "http://www.somedomain.com/mobile.html";  }
 }  




************jQuery Mobile button for Full Site ***************

<ul data-role="listview" data-inset="true">
        <li>
            <a href="http://www.somdomain.com/?view=full">Full Site</a>
        </li>
</ul>

How do I get the redirect to the full site to look like it should on the mobile device?

Answer 1

Obviously you’ll go back to the mobile website because it will run your detection script and redirect you straight back. You need to use techniques to avoid this.

You need to TELL the full site you just came from the mobile website and DO NOT want to go back.

Some examples for on the full site:

• check if view is set to ‘full‘. If true, set a cookie or a php session to avoid running the detection script.
• check if the referrer is the mobile website. If true, dont run the detection script.

Hope this gets you on your way.