Update: June 2013

I’ve placed the code on Github in the hopes that the implementation of this code will be a bit more clear. Also hoping that others can help me improve the code as my device arsenal is quite limited.

Responsive View Full Site on Github

Update: May 2013

QuirksMode has a handy page for browser compatibility for viewports. It looks like this technique is still not supported on Windows Phone 7 or 8 Firefox Mobile.

I’ve been tinkering a lot lately with responsive web design. The designers and developers I talk to about it absolutely love the concept and the possibilities, however I’ve found when speaking to others outside the industry about it, I’ve been met with both positive and negative feelings. Several people I’ve spoken to have asked me, “That’s cool, but what if I want to view the full site?”

I searched to see if anyone had developed anything like that yet, but I couldn’t find anything (my apologies if someone has already done a write up similar to this post!). After messing around with a few options, including adding in extra styling and switching stylesheets, I wondered if I could just modify the viewport meta tag. To my surprise, my initial test worked out extremely well.

Using jQuery, we can switch out the content of the viewport meta tag that sets the width of the viewport to the width of the device with the default viewport width. You can read more about how the iPhone handles the viewport meta tag. I also set a variable which has the target width of our website, though it’s currently static and I’m sure there’s some further exploration needed here.

var targetWidth = 980; 

$('#view-full').bind('click', function(){ 
$('meta[name="viewport"]').attr('content', 'width=' + targetWidth);

So far, I haven’t been able to find any cons. I haven’t tested this on Android or an iPad yet, but the latest version of iOS 5 on my iPhone seems to handle this fairly well. Update: No reported issues on Android or any iOS devices so far!

Be sure to check out the demo on your mobile device. Note: the demo has been updated to include new functionality, see the update below!

I’m still hesitant to think it’s this easy. I hope to start some good discussion below!

Part 2 Update: Saving User Preferences

Matt (see comment below) had the great idea of being able to persist the user’s choice if they clicked the button to “view full site.” We can do this fairly easily thanks to HTML5 Local Storage and a bit of Javascript.

Check out the updated demo to view the new bit of Javascript we’ve added.

In a nutshell, we can store a value in Local Storage that checks to see whether or not our viewport should be configured for responsive design. If not, it will change the viewport to the width we’ve specified.

I am by no means an advanced Javascript-er, so I may have over complicated the code. If you have any suggestions for improvement, please feel free to comment! I won’t be offended ;).