タブレットをPC表示の縮小で対応する

レスポンシブの解決策として、何がベストか日頃悩むところなのですが、その際に扱いが難しいのがタブレット。複雑なデザインの場合は、単純にPCの表示をそのまま縮小するのが一番楽ではあります。

まず前提として、レスポンシブでない場合、タブレット端末はPCの表示をそのまま適切なサイズに縮小して表示します。レスポンシブのあｔめのviewportの設定はだいたい下記のタイプです。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

スマホの場合、上記の device-width で画面サイズを自動計算しますが、タブレットの場合は、一定のサイズを返してくるので、そのサイズからはみ出した部分はスクロールしないと表示できない状態になります。PC版の画面サイズが、1024pxで、タブレットが768pxや960pxの場合、コンテンツがはみ出してスクロールが発生してしまうことに。そこでタブレットに対しては、明示的にサイズを指定してあげればよいわけです。

<meta name="viewport" content="width=1024">

後は、スマホとタブレットでviewportを出し分ける作業だけです。下はワードプレスでis_mobile関数を作っている場合に使える処理です。