iPadのビューポートをパソコンと一緒にする方法
最終更新日 - 公開日 2020.07.28
by
iPadのビューポートをパソコンと一緒にする方法を紹介します。
例えば、スマホとiPadでビューポートの指定を変えたい時に便利な方法です。
タブレットの表示をパソコンと一緒にする方法
サイト閲覧時にiPadの表示をパソコンと一緒にする方法を紹介します。
userAgent の分岐を使って、iPadはビューポートの横幅を指定してパソコンの表示を再現します。
次のコードをページの head タグ内に追加してください。
<script>
if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
document.write('<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1">');
}else{
document.write('<meta name="viewport" content="width=1080,user-scalable=yes,maximum-scale=1">');
}
</script>
閲覧時のユーザーエージョントを見て、スマートフォン以外であれば、パソコンとタブレット共通の viewport を指定します。
適宜、ユーザーエージェントに変更を加えてご利用ください。
iPadの横持ちを判別する方法
iPadやスマートフォンの横持ちで、さらに分岐させたい場合の方法を紹介します。
アラートは状態確認のために入れているので、動作の確認が住んだ場合は削除してご利用ください。
<script>
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { // スマートフォンの場合
if (window.innerWidth > window.innerHeight) { // 横と縦を比較して横長の場合に横と判断
alert('スマホ横が検出されました');
document.write('<meta name="viewport" content="width=1180, user-scalable=yes, maximum-scale=1">');
} else { // それ以外の場合に縦と判断
alert('スマホ縦が検出されました');
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">');
}
} else if (navigator.userAgent.indexOf('Safari') > 0 && navigator.userAgent.indexOf('Chrome') == -1 && typeof document.ontouchstart !== 'undefined'){
if (window.innerWidth > window.innerHeight) { // 横と縦を比較して横長の場合に横と判断
alert('iPad横が検出されました');
document.write('<meta name="viewport" content="width=1366, user-scalable=yes, maximum-scale=1">');
} else { // それ以外の場合に縦と判断
alert('iPad縦が検出されました');
document.write('<meta name="viewport" content="width=1080, user-scalable=yes, maximum-scale=1">');
}
} else {
alert('その他');
document.write('<meta name="viewport" content="width=1080, user-scalable=yes, maximum-scale=1">');
}
</script>
まとめ
iPadのビューポートをパソコンと一緒にする方法を紹介しました。