Forum Moderators: not2easy
Depending on how easy it is to implement, you might want to check to see how much usage it gets on major pages and add it to more if/when you see it gets more use.
Full site? Huh? What am I on nowIt is easier than calling it "View the site that you would see if you weren't so insistent on using a phone to surf the web thus making me work harder to satisfy even freak'n device on the market because you find it necessary to shop while in the bathroom!"
<div id="view-options"><span id="view-full">View Full Site</span></div>
/* View Mobile/Full Site options */
#view-options span {
background-color: #222222;
border-radius: 8px 8px 8px 8px; padding: 8px 16px;
color: #FFFFFF; display: block; font-size: 16px; font-weight: bold;
}
#view-default {display: none;}
@media only screen and (min-width: 768px) {
/* full viewport new definitions */
span#view-full{display:none;}
span#view-default{display:inline;}
}
/**
* Mobile "Show Full Site" feature using HTML5 Web Storage
* http://dev.w3.org/html5/webstorage/
*/
(function(){
// default width value for full site viewport
var widthFull = 768;
// localStorage value already set?
try {
localStorage.showFullSite = localStorage.showFullSite == 'undefined'
? 'true'
: localStorage.showFullSite
;
} catch (e) {
// no polyfill necessary at this time; if needed:
// https://developer.mozilla.org/en-US/docs/DOM/Storage OR
// https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browserPolyfills
}
var showFullSite = function(){
$('meta[name="viewport"]').attr('content','width='+widthFull);
if(!$('#view-options #view-default').length){
$('#view-options').append('<span id="view-default">View Mobile</span>');
}
localStorage.showFullSite = 'false'; // don't show full site button
};
var showDeviceWidth = function(){
$('meta[name="viewport"]').attr('content','width=device-width');
localStorage.showFullSite = 'true'; // show full site button
};
// User already selected view full site? Change the viewport
if(Modernizr.localstorage){
if(localStorage.showFullSite == 'false'){
showFullSite();
}
}
$('#view-full').on('click', function(){showFullSite();});
$('#view-options').on('click', '#view-default', function(){
showDeviceWidth();
});
})();
I have a feeling like I'm about to waste a good amount of time
2) will be used by a minuscule amount of people
3) doesn't provide any real-world benefit
4) will just add another wasteful javascript download to the head section that 99% of visitors won't use
