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を切り替える必要性が出てきた際にぜひ。。。