サイト閲覧時にタブレットの表示をパソコンと一緒にする方法

サイト閲覧時にタブレットの表示をパソコンと一緒にする方法を紹介します。
例えば、レスポンシブサイトでタブレットの調整を簡略化したいときに便利な方法です。

1. タブレットの表示をパソコンと一緒にする方法

タブレットの表示をパソコンと一緒にする方法

サイト閲覧時にタブレットの表示をパソコンと一緒にする方法を紹介します。
方法として、viewport 設定を「パソコン・タブレット」と「スマートフォン」で分けることで対応します。
次のコードをページの 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 を指定します。
適宜、ユーザーエージェントに変更を加えてご利用ください。

まとめ

サイト閲覧時にタブレットの表示をパソコンと一緒にする方法を紹介しました。