レスポンシブデザインと言ってもタブレットやスマホの表示は切り分けている場合も多いですね。使用したWordPressテンプレートでもiPadで表示した際にはモバイル用のCSSが適応されていました。
タブレットもPCと同じ表示にしたい
タブレットの場合十分な横幅（解像度）があり、PCをそのまま表示されたほうが、ユーザビリティーが高い場合が多いと思います。サイトの作りやコンテンツによってはタブレット用の見た目を用意するのは有りですが。通常のブログなどではPCと同じものが良いと思っています。
どうやってPCとタブレットを判別しているのか
WordPressでPC、タブレット、スマホなどを分ける場合は下の2つがほとんどです。
ユーザーエージェントでの判別をしている場合
テーマのfunctions.phpやjsファイルに下記のような指定がないか見てみましょう。
strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile')
またはヘッダーなどで「wp_is_mobile」の記述がないか。
JavaScriptなどを使用してユーザーエージェントに含まれる特定の文字列を判断し、出し分けます。簡単に言えば、見に来たブラウザの情報内にmobileの文字が含まれている場合はモバイル端末扱いにするなど。
また、WordPressではこの判別を「wp_is_mobile」と言う関数として扱えます。しかしこの関数ではiPadを含む多くのタブレットもスマホと同じ扱いのため「wp_is_mobile」を使用されている場合の対処などは別記事で書いていますのでそちらを参照してください。
画面サイズによって切り替えている場合
CSSに下記のような記述がないか見てみましょう。
@media screen and (min-width: 768px) { }
数値はまちまちですが、PC、タブレット、スマホの3パターンに分かれていることが多いです。
CSSのメディアクエリでブラウザーサイズを判別して例えば、768px以下の幅の場合このCSSを使うなどCSSを使い分けられます。レスポンシブ対応の際にメインで利用される方法です。
この場合、CSSの@media screenで該当するブラウザー幅の記述を修正することで対応可能です。
サイトを確認する
ユーザーエージェントを偽装してサイトを表示できるFirefoxやChromeのプラグインを使用することで、iPnomeで見た際の表示やiPad、Androidで見た表示などを切り替えて確認できます。
どの方法でスマホ、タブレットが判別されているかがわかれば対処法はすぐに見つかります。
[amazonjs asin=”B00EP8MEMA” locale=”JP” title=”ASUS Nexus7 ( 2013 ) TABLET / ブラック ( Android / 7inch / APQ8064 / 2G / 32G / BT4 ) ME571-32G”]
コメント