【画面ハミ出し対策】レスポンシブでタブレットとPCは同じデザインにする方法
公開日:2015年1月30日

当ブログでは賢威というwordpressテーマを使用しています。SEO的に素晴らしい作りなのですが、タブレットで閲覧した場合に画面の端が画面からはみ出してしまいます。なので、先月のリニューアルの際にタブレットはPCと同じように見えるようにしました。
Photo : Design book proposal thru Wordle
非レスポンシブだとタブレットが自動で縮小してくれる
iPadなどのタブレット端末でレスポンシブウェブデザインではないPC専用のサイトを見た場合、iPadが適切なサイズで表示してくれます。
例えば、神奈川県のホームページは基本的に横幅が1152pxあります。iPadの縦にしたときの横幅は768pxですが、それに合わせて縮小してくれます。
viewportの記述が無い場合は(iPadでは?)width=980pxと認識します。
私がロードバイクのメンテナンスやホイールを自組みした際によく見たこのサイトはviewportの記述はありませんが、iPadでは縦横どちらもジャストフィットします。
自転車探検!(2018/1/19 サイトが閉鎖されてました)
はみ出るレスポンシブウェブデザイン
ところが、タブレットのサイズに対応していないレスポンシブウェブデザインの場合は実寸のまま表示されてしまいます。
リニューアル以前の当ブログをiPadで見ると上記のように端が切れていました。
iPadの横幅は768pxで旧ブログの横幅は980pxだったので、212pxは画面の外です。横スクロールが発生してしまうパターンです。ユーザービリティ的にも良くないです。
当ブログも一時はレスポンシブでタブレットにも対応させておりました。しかし、メンテナンスが面倒だったので、最終的にはデフォルトの賢威と同様にPCとスマートフォンにだけ対応させてました。
それでしばらく運営していたのですが、先月のリニューアルではPCと全く同じように表示するために下記のことをしました。
タブレットでもPCと同じデザインを表示させる方法
デザインと言うと大げさですが、要はタブレットはPCの単純縮小で表示させるという方法です。
PC・タブレットからのアクセスにはviewportをwidth=◯◯◯、スマートフォンからのアクセスにはwidth=width=device-widthを返します。
1. function.phpにコードを追加する
wordpress関数のwp is mobileは、タブレットもスマートフォンと同じ扱いです。これだと今回の目的は果たせませんので、「スマートフォンとそれ以外」という切り分け方をwordpressのテーマファイルのfunction.phpに追記します。
WordPressのスマホ対応に使える!!PCとの表示振り分け関数・プラグイン
追記するのは上記ページの【タブレット・PC」と「スマホ・ガラケー」とを区別する「is_mymobile関数」を自作して利用】の「//iphoneまたはipodで閲覧されているか〜」から始まるコードです。
(どのテーマファイルでもそうだと思いますが)賢威の場合は、function.phpの最後の「?>」の直前にコピペすれば問題なく動作します。
2.header.phpにスマートフォンとそれ以外を切り分けるコードを追加する
header.phpのhead内に以下の記述をします。既存のviewport記述は削除してください。
1 2 3 4 5 6 7 8 9 |
<?php if (is_mymobile()):?> <!-- ↓スマートフォン用のviewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- ↑スマートフォン用のviewport --> <?php else: ?> <!-- ↓スマートフォン以外のviewport --> <meta content="width=1024" name="viewport"> <!-- ↑スマートフォン以外のviewport --> <?php endif; ?> |
このブログの場合、横幅は1000pxで余白を少し設けたかったので1024pxにしましたが、widthは適宜調整してください。
タブレット(iPad)での見え方
このように端まで表示されるようになりました。
家電量販店でiPadminiでの見え方を確認しましたが、問題ないサイズでした。Androidのタブレットでは確認したことがありませんので少し心配です。問題点がありましたらぜひ教えて下さい。
ちなみに、スマートフォンでは下記のようにレスポンシブで表示されます。