Webサイトを作る際、最近では様々な画面サイズ(解像度)のデバイスが増えていることから
レスポンシブで構築する際のviewport設定に迷うことがあります。

すべてのデバイスで画面幅に合わせて綺麗に表示させるには
viewportの値を切り替えてしまった方が楽な場合もあったので
スマートフォン[iPhone/Android]とタブレット[iPad/Android]それぞれで
jQueryを使って、viewportを切り替えるサンプルを作ってみたので紹介してみます。

jQueryでスマートフォンとタブレットでviewportを切り替える実験

まずは別枠で動作サンプルから。
※サンプル画面はスマートフォンまたはタブレットでご確認ください。

「jQueryでスマートフォンとタブレットでviewportを切り替える実験」サンプルを別枠で表示

見た目上は分かりませんが
スマートフォン[iPhone/Android mobile]とタブレット[iPad/Android]で
それぞれviewportを切り替えてあります。

今回のサンプルはHTML、CSSについては
特に特別なことはしていないので内容については割愛します。

viewportを切り替えるスクリプトは以下のようになります。

◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
	// setViewport
	spView = 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0';
	tbView = 'width=1000px,maximum-scale=2.0,user-scalable=1';

	if(navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)){
		$('head').prepend('<meta name="viewport" content="' + spView + '" id="viewport">');
	} else if(navigator.userAgent.indexOf('iPad') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') == -1) || navigator.userAgent.indexOf('A1_07') > 0 || navigator.userAgent.indexOf('SC-01C') > 0){
		$('head').prepend('<meta name="viewport" content="' + tbView + '" id="viewport">');
	} 
});
</script>

スクリプト7、8行目「spView」「tbView」でスマートフォンとタブレット
それぞれで切り替える「viewport」の「content」の値を設定します。

スマートフォン[iPhone/Android mobile]の場合は「spView」に設定した値が入り、
タブレット[iPad/Android]の場合では「tbView」に設定した値になります。

タブレットでPCレイアウトに近いものを表示する際に
device-widthでは画面左右に余白が空かずに
画面枠いっぱいに張り付いたような微妙見た目になってしまうこともあるので
viewportで少し左右に余白をつけたwidthを指定してあげることで見た目を調整できるかと思います。

その他、スマートフォンとタブレットで
ピンチイン/ピンチアウトのON/OFFを変えることも可能になるかと思います。

上記のスクリプトに加えて
iPhone6 Plusの縦画面と横画面の切り替えについても
実装した場合は以下のようになります。

iPhone6 Plus対応:jQueryでスマートフォンとタブレットでviewportを切り替える実験

「iPhone6 Plus」の横向き画面は
タブレットとほぼ同じサイズになることもあるので
「iPhone6 Plus」の横向き画面はタブレット用のviewportが入るように設定してみます。
(「iPhone6 Plus」の縦画面ではスマートフォン用のviewportが入ります)

まずは別枠で動作サンプルから。
※サンプル画面はiPhone6 Plus等でご確認ください。

「iPhone6 Plus対応:jQueryでスマートフォンとタブレットでviewportを切り替える実験」サンプルを別枠で表示

「iPhone6 Plus」用動作を追加したスクリプトは以下のようになります。

◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
	// setViewport
	spView = 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0';
	tbView = 'width=1000px,maximum-scale=2.0,user-scalable=1';

	if(navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)){
		$('head').prepend('<meta name="viewport" content="' + spView + '" id="viewport">');
	} else if(navigator.userAgent.indexOf('iPad') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') == -1) || navigator.userAgent.indexOf('A1_07') > 0 || navigator.userAgent.indexOf('SC-01C') > 0){
		$('head').prepend('<meta name="viewport" content="' + tbView + '" id="viewport">');
	} 

	// iPhone6 Plus Landscape Viewport
	if(navigator.userAgent.indexOf('iPhone') > 0){
		if(window.devicePixelRatio == 3) {

			if(window.orientation == 0){
				$('#viewport').attr('content',spView);
			} else {
				$('#viewport').attr('content',tbView);
			}

			window.onorientationchange = setView;

			function setView(){
				setTimeout(function(){
					location.reload();
					return false;
				},500);
			}
		}
	}
});
</script>

「iPhone6 Plus」で
縦向き(portrait)では「spView」に設定した値が入り
横向き(landscape)では「tbView」に設定した値になります。
※画面の向きを変えるたびにviewportの値が切り替わります。

以上が、jQueryでスマートフォンとタブレットで
viewportを切り替える実験でした。

ページ構成や、viewportの設定方法によっては
スマートフォンとタブレットでviewportを切り替える必要性がないかもしれませんが
それぞれ判別させてviewportを切り替える必要性が出てきた際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)

  • 【HTML/CSS】諸々リンクなど | AS blind side | 2015.04.02 20:35

    [...] 【JS/JQuery】 ・jQueryでスマートフォンとタブレットでviewportを切り替える実験(iPhone6 Plus対応) | BlackFlag ・実は簡単にできる!PCサイトとスマホサイトを選んで振り分ける方法 | smart4meブ [...]







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでスマートフォンとタブレットでviewportを切り替える実験(iPhone6 Plus対応)

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner