京都のシステム開発・ホームページ制作会社　株式会社Nextat（ネクスタット）

どうやら世の中には「スマートフォン向けサイトはPC向けサイトより情報が少ないのではないか？」と考えるユーザが一定数いるようです。
※有意な数のアンケートを取ったわけではないので、割合はわかりませんが。

かく言う私も、スマートフォン向けのサイトで情報を探すときにPC版表示に切り替えたいと思うことはよくあります。

モバイル向けのページをhttp://example.com/s/などのように別ページとして表示している場合はリンクを貼れば済む話です。

しかし、レスポンシブWebデザインを採用している場合は同じようにはいきません。
せっかくレスポンシブWebデザインを採用しているのだから、PC版をわざわざ表示することはないというのが制作側の本音なんですけどね。

前述のスマホでは情報が見られないかもしれないと思っているユーザのために、以下のPC向け表示もどきを導入するのも悪くはないかと思います。

方法

内容自体はとても単純で、metaタグのviewportを差し替えるだけです。

簡単なコード

htmlのheadタグ内にスマホ向けのviewportの指定を書いておきます。

<meta name="viewport" content="width=device-width">

また、PC表示に切り替えるためにクリックする要素のidを#pc-site-change-button、スマホ向けに戻すためにクリックする要素のidを#sp-site-change-buttonとします。
簡単のため、javascriptのコードにはjQueryを利用します。

$(function()) {

    function changeViewPort(width) {
        $('meta[name=viewport]').attr('content','width=' + this.width);
    }


    $('#pc-site-change-button').on('click', '' function(){
        changeViewPort(980);
    });

    $('#sp-site-change-button').on('click', '' function(){
        changeViewPort('device-width');
    });

});

Cookieで形状記憶

ページを切り替えると元のスマホ向け表示に戻ってしまうため、ページ移動後も表示を維持したい場合にはCookieを使って設定を記録する必要があります。
ページの読み込み完了時にCookieから読みだした設定のmetaタグに入れ替えます。
jQuery.cookie.jsを使います。

若干実用向けなコード

$(function() {
 	var ViewPort = {
 		width: 'device-width',
 		initialScale: '1.0',
 		minimumScale: '0.25',
 		maximumScale: '1.6',

                //こちらの設定はご自由に
 		modes : {
 			sp: {
 				width:'device-width',
 				initialScale: '1.0',
 				minimumScale: '0.25',
 				maximumScale: '1.6'
 			},
 			pc: {
 				width: '980',
 				initialScale: '0.37',
 				minimumScale: '0.25',
 				maximumScale: '1.0'
 			}
 		},
 		currentMode : 'sp',

                //ページ読込み時に実行 Cookieから設定を読み出す
 		init: function () {
 		    if ($.cookie('viewport-mode')) {
 		    var modeName = $.cookie("viewport-mode");
 			    this.changeMode(modeName);
                    }
 		},

                //スマホ向けとPC向けを切り替え
 		changeMode: function(modeName){
 			var mode = this.modes[modeName];
 			$.cookie('viewport-mode', modeName); //Cookieに値を設定
 			this.width = mode.width;
 			this.initialScale = mode.initialScale;
 			this.minimumScale = mode.minimumScale;
 			this.maximumScale = mode.maximumScale;
 			this.currentMode = modeName;
 			this.applyMetaTag();
 		},

                //現在の設定でmetaタグを差し替える
 		applyMetaTag: function (){
var content = 'width=' + this.width + ', initial-scale=' + this.initialScale + ', minimum-scale=' + this.minimumScale + ', maximum-scale=' + this.maximumScale;
 			$('meta[name=viewport]').attr('content', content);
 		},
 	};

 	ViewPort.init();

 	$('#pc-site-change-button').on('click', '', function(){
 		ViewPort.changeMode('pc');
 	});

 	$('#sp-site-change-button').on('click', '', function(){
 		ViewPort.changeMode('sp');
 	});

});

以上です。