Mobile Detection and Toggling to Full Site on Phones

Avatar
Christopher Haupt
Follow

Webvanta's mobile detection features provides a means for you to allow users to override the default behavior and force viewing of the full site while on a smartphone. 

One easy way to allow users to do that is to provide an anchor tag that has a click handler on it:

<a href="/" class="view-full-site">Full Site</a>

This creates a link on the mobile site, that when clicked will invoke the following click handler, which you include in your mobile site's JavaScript:

<script>
  $("#mobile-page-<w:slug />").live('pageshow', function(psevt) {  
    $('.view-full-site').click(function(event){
      event.preventDefault();
      $.cookie('wv_mobile_mode','full', {expires:1, path:'/'}); 
      document.body.style.display = "none";
      window.history.pushState("Going to Desktop Site", "Site Name Here", "/");
      location.reload();
    });  
  }); 
</script>

 

Note: updated 4/24/13; the script we previously published stopped working with the aggressive caching being done by recent phone browsers. 

Have more questions? Submit a request

3 Comments

Date Votes
  • 0
    Ann MacDonald

    Do your sites have distinctly different mobile versions or are you using CMS to determine whether it is being viewed on mobile or not and to display the content accordingly? thanks!

  • 0
    Avatar
    Michael Slater

    It's up to the designer of each site whether to use responsive design (one set of HTML pages, with media queries to change the CSS for different devices) or to use a different set of pages for mobile devices (which allows you to create more optimized mobile pages and use libraries such as jQuery Mobile).

    The CMS supports either approach. When we are doing the site building, we've generally preferred using separate pages with jQuery Mobile, but both approaches have their strengths.

  • 0
    Charity

    with jquery eliminating .live and moving to .on, this is the updated code to force going to the desktop side of a site.

     

      $("body").on('pageshow', '#mobile-page-<w:slug />', function(psevt) {  
        $('.view-full-site').click(function(event){
          event.preventDefault();
          $.cookie('wv_mobile_mode','full', {expires:1, path:'/'}); 
          document.body.style.display = "none";
          window.history.pushState("Going to Desktop Site", "Site Name Here", "/");
          location.reload();
        });  
      });  

Please sign in to leave a comment.
Powered by Zendesk