当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - How do I get the full site button on jQuery Mobile site to work correctly?

问题描述:

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?

网友答案:

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.

网友答案:

Thanks to Gillian Lo-Wong, I was able to get the following code to work for me...

home.html

function urlParam(name){
            var results = new RegExp('[\\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
            if(results)
                return results[1] || 0;
            else
                return '';
        }

        if(urlParam('view') == 'full'){ 
        }
        if(urlParam('view') == ''){
            // <![CDATA[
            var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
            if (mobile) { 
                    document.location = "http://www.mysite.com/mobile.html";  
            }  
            // ]]>
        }

and the mobile.html code

<a href="http://www.mysite.com?view=full" data-ajax="false">Full Site</a>
网友答案:

You may try adding rel="external" to the <a> link leading to your desktop page:

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

This will disable the Ajax navigation and will make sure to refresh the page, erasing the data transforming your desktop page into a mobile page.

Let me know if this works for you.

分享给朋友:
您可能感兴趣的文章:
随机阅读: