View Full Site for Responsive Web Design

Add a view full site link for visitors who want to see the desktop version of your web page.

Please note: make sure you are viewing this demo from a mobile device.


View Full Site
// viewport stuff
var targetWidth = 980;
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;

var showFullSite = function(){    
    viewport.attr('content', 'width=' + targetWidth);  
    
    if(!$('#view-options #view-responsive').length){
        $('#view-options').append('View Mobile Optimized');
    }    
    
    localStorage.isResponsive = 'false';
}

var showMobileOptimized = function(){
    localStorage.isResponsive = 'true';
    viewport.attr('content', 'width=' + deviceWidth);
}

// if the user previously chose to view full site, change the viewport
if(Modernizr.localstorage){
    if(localStorage.isResponsive == 'false'){
        showFullSite();
    }
}    

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

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