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(localStorage.isResponsive == 'false'){

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

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