iPadのビューポートをパソコンと一緒にする方法

iPadのビューポートをパソコンと一緒にする方法を紹介します。
例えば、スマホとiPadでビューポートの指定を変えたい時に便利な方法です。

1. iPadの表示をパソコンと一緒にする方法
2. 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のビューポートをパソコンと一緒にする方法を紹介しました。