jQuery viewport switcher: a switch, giving the possibility to change to desktop mode in mobile view.

gistfile1.js

// viewport stuff
var targetWidth = 960;
var deviceWidth = 'device-width';
var viewport = $('meta[name="viewport"]');

// check to see if local storage value is set on page load

  localStorage.isResponsive = (localStorage.isResponsive === undefined) ? 'true' : localStorage.isResponsive;
  localStorage.showBrowserSwitcher = (localStorage.showBrowserSwitcher === undefined) ? 'true' : localStorage.showBrowserSwitcher;


var showFullSite = function(){    
    viewport.attr('content', 'width=' + targetWidth);  
    
    $('#view-options').html('<span id="view-responsive">Mobile Version</span><span id="mobile-close">nicht mehr nachfragen</span>');
    $("link[href='stylesheets/app_mobile.css']").remove();
  
      localStorage.isResponsive = 'false';
}

var showMobileOptimized = function(){

   $('#view-options').html('<span id="view-full">Mobile Version aus</span><span id="mobile-close">nicht mehr nachfragen</span>');
   
     localStorage.isResponsive = 'true';

     viewport.attr('content', 'width=' + deviceWidth);

     var css = $("<link>").attr("href", "stylesheets/app_mobile.css").attr("rel", "stylesheet").attr("media", "screen");
     $("head").append(css);
}

$('#view-options').on("click", "#view-full", function(){
    showFullSite();
});

$('#view-options').on("click", "#view-responsive", function(){
    showMobileOptimized();
});

(function($){

  $("body").on("click", "#mobile-close", function(e) {
      $(this).parent().remove();
      localStorage.showBrowserSwitcher = 'false';
  });
  
  if(localStorage.showBrowserSwitcher === 'false') {
    $("#view-options").hide();
  }
  else {  
    if($.browser.mobile) {
      viewport.attr('content', 'width=' + targetWidth);  
  
      $('#view-options').html('<span id="view-full">Mobile Version aus</span><span id="mobile-close">nicht mehr nachfragen</span>');
  
      if(localStorage.isResponsive === 'true') {
       showMobileOptimized();
       viewport.attr('content', 'width=' + deviceWidth);
  
       var css = $("<link>").attr("href", "stylesheets/app_mobile.css").attr("rel", "stylesheet").attr("media", "screen");
       $("head").append(css);
  
      }
      else {
        if(localStorage.isResponsive === 'false') {
          showFullSite();
        }
      }
    }
    else {
      $("#view-options").hide();
    }
  }

})(jQuery);