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

公開日:2015年1月30日 

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

当ブログでは賢威というwordpressテーマを使用しています。SEO的に素晴らしい作りなのですが、タブレットで閲覧した場合に画面の端が画面からはみ出してしまいます。なので、先月のリニューアルの際にタブレットはPCと同じように見えるようにしました。


今回はwordpressの話です。特に賢威テーマなどタブレットには最適化されていないテーマのユーザーならやっといて損はないかと思います。

Photo : Design book proposal thru Wordle

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

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

神奈川県ホームページ

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

viewportの記述が無い場合は(iPadでは?)width=980pxと認識します。

自転車探検

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

自転車探検!

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

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

Khamsin-note旧デザイン

リニューアル以前の当ブログを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記述は削除してください。

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

タブレット(iPad)での見え方

リニューアル後の当ブログデザイン

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

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

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

Android

iPhone5

この方法を実装したのがリニューアルの最後の方だったので、当ブログではいろいろと無駄なcssが読み込まれてます。この辺りを整理すれば現状より若干軽くなるはずですがリソースの都合で放置してます。

コメントを残す