【画面ハミ出し対策】レスポンシブでタブレットとPCは同じデザインにする方法

公開日：2015年1月30日　

Photo : Design book proposal thru Wordle

非レスポンシブだとタブレットが自動で縮小してくれる

iPadなどのタブレット端末でレスポンシブウェブデザインではないPC専用のサイトを見た場合、iPadが適切なサイズで表示してくれます。

例えば、神奈川県のホームページは基本的に横幅が1152pxあります。iPadの縦にしたときの横幅は768pxですが、それに合わせて縮小してくれます。

viewportの記述が無い場合は（iPadでは？）width=980pxと認識します。

私がロードバイクのメンテナンスやホイールを自組みした際によく見たこのサイトはviewportの記述はありませんが、iPadでは縦横どちらもジャストフィットします。

自転車探検！

はみ出るレスポンシブウェブデザイン

ところが、タブレットのサイズに対応していないレスポンシブウェブデザインの場合は実寸のまま表示されてしまいます。

リニューアル以前の当ブログをiPadで見ると上記のように端が切れていました。

iPadの横幅は768pxで旧ブログの横幅は980pxだったので、212pxは画面の外です。横スクロールが発生してしまうパターンです。ユーザービリティ的にも良くないです。

当ブログも一時はレスポンシブでタブレットにも対応させておりました。しかし、メンテナンスが面倒だったので、最終的にはデフォルトの賢威と同様にPCとスマートフォンにだけ対応させてました。

それでしばらく運営していたのですが、先月のリニューアルではPCと全く同じように表示するために下記のことをしました。

タブレットでもPCと同じデザインを表示させる方法

デザインと言うと大げさですが、要はタブレットはPCの単純縮小で表示させるという方法です。

1. function.phpにコードを追加する

wordpress関数のwp is mobileは、タブレットもスマートフォンと同じ扱いです。これだと今回の目的は果たせませんので、「スマートフォンとそれ以外」という切り分け方をwordpressのテーマファイルのfunction.phpに追記します。

WordPressのスマホ対応に使える!!PCとの表示振り分け関数・プラグイン

追記するのは上記ページの【タブレット・PC」と「スマホ・ガラケー」とを区別する「is_mymobile関数」を自作して利用】の「//iphoneまたはipodで閲覧されているか〜」から始まるコードです。

（どのテーマファイルでもそうだと思いますが）賢威の場合は、function.phpの最後の「?>」の直前にコピペすれば問題なく動作します。

２．header.phpにスマートフォンとそれ以外を切り分けるコードを追加する

header.phpのhead内に以下の記述をします。既存のviewport記述は削除してください。

このブログの場合、横幅は1000pxで余白を少し設けたかったので1024pxにしましたが、widthは適宜調整してください。

タブレット（iPad）での見え方

このように端まで表示されるようになりました。

家電量販店でiPadminiでの見え方を確認しましたが、問題ないサイズでした。Androidのタブレットでは確認したことがありませんので少し心配です。問題点がありましたらぜひ教えて下さい。

ちなみに、スマートフォンでは下記のようにレスポンシブで表示されます。