Esses dias eu li 4 críticas aos layouts responsivos.

O cara dizia que o visitante pode “gostar” da versão full, e em sites responsivos não existe o botão “voltar a versão desktop“.

Bom, por mais que seja discutível esse ponto de vista do cara, eu pensei e há sim uma forma de fazer o botão “voltar a versão desktop”, mesmo quando estamos usando media queries, para fazer nosso layout responsivo.

Basta atacar a base dessa técnica, a primeira coisa que a faz funcionar. A meta tag viewport.

Criei um elemento, que no click dele, altera o valor da minha meta viewport.

d.getElementById('no-responsive').onclick = function(){
			var vps = d.querySelectorAll("meta[name='viewport']");
			vps[0].content = 'width=960px,initial-scale=0.3,user-scalable=yes';
		}

Prontinho, feito o botão para ver a versão full. Derrubando o argumento do cara.

— update 2013-05-29 —

onOrientationChange

E segue uma versão completa do código, que identifica se o visitante está em landscape ou portrait.

Tem uma chamada ao .innerHTML do elemento #t apenas para debug. Remova quando for usar em produção.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Desligar Responsivo</title>

	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<style>
body { margin: 0; padding: 0; }
</style>
</head>
<body>

	<main id="main">
		<h1>Desligar responsivo</h1>

		<span id="no-responsive">desligar</span>
		<p id="t"></p>

	</main><!-- #main -->
<script>
(function(w, d, undefined) {
	var viewport = {
		meta : d.querySelectorAll("meta[name='viewport']")[0],
		landscape : function() {
			viewport.meta.content = 'width=960px,initial-scale=1,user-scalable=yes';
			alert('landscape');
		},
		portrait : function() {
			viewport.meta.content = 'width=960px,initial-scale=1,user-scalable=yes';
			alert('portrait');
		},
		orientation : function() {
			if(Math.abs(window.orientation) === 90) {
				viewport.landscape();
			} else {
				viewport.portrait();
			}
			d.getElementById('t').innerHTML = '<strong>viewport:</strong> ' + viewport.meta.content;
			d.getElementById('t').innerHTML += '<br/><strong>body.offsetWidth:</strong> ' + d.querySelector('body').offsetWidth;
		}
	};


	w.onorientationchange = viewport.orientation;
	d.getElementById('no-responsive').onclick = viewport.orientation;


}(window, document));
</script>
</body>
</html>