スマホ対応サイトの製作というのは完成させました、はい終わりとはいかないようだ。完成したらちゃんと正常に表示されるのかを実際に確認する必要があるのだが、
スマートフォンとひとことに言ってもiphoneなどのiosとＡｎｄｒｏｉｄ携帯の違いから同機種のバージョン、古い機種と新しい機種の液晶の解像度の違いからネットブラウザの表示の差異などきっちりと検証しようと思えばきりがない。
特にスマホでのブラウザごとの表示の差異は決して小さくはないのでその辺を含めた話を少々
それでは、レポートを始めよう
スマホ用レスポンシブデザイン
このサイトに使用しているWordpressの標準テーマであるTwenty twelveはレスポンシブデザインと呼ばれるもので実はこのままでもスマホにもタブレットにもＰＣにも柔軟に対応しているという話は以前にも新SEc-404の製作のときにも話したと思う。
ただしあくまで表示できるだけで、読み込みにかかる負荷やスマホで閲覧したときの使い勝手などは二の次である。
そこでモバイル用としてできるだけ余計なものを省いて容量を軽くして、ついでにレイアウトをスマホ用に最適化した。というのが今回と前の製作レポートのときのスマホ対応の実態になる。
もちろん現状端末のスペックやモバイル回線事情などの問題が解決していけばその限りではないが
スマホ用だけどあくまでレスポンシブ
twenty twelveの仕様がディスプレイの横幅の解像度が一定以下のときにサイドバーをメインコンテンツの下に落としこんで一列に表示させるというもので、ＰＣな どの横幅が大きいディスプレイをみたときはサイドバーは横に表示されているが、基本的に解像度の小さいスマートフォンなどで表示すると一列で表示 される。
実はEvo 3dなどの解像度の高いスマホで横向きにしてこのサイトを見るとPCサイトと同じように２カラムで表示される(製作レポートを同じ条件でみるとごにょごにょ)。最初この仕様を修正して強制的に一列にしようかとも考えたが、このままのほうが何かと都合がよさそうとも思えるのでそのままにしてある。
ネットブラウザによる表示の差異
スマホサイトの対応で無視できないもののひとつにネットブラウザごとで表示に違いがある。例えば最初のものはアンドロイドの標準ブラウザで表示したものだが、
これがgoogle chromeやfire foxだと標準ブラウザよりテキストが大きく表示される。
Opera miniの仕様
またopera miniというブラウザでは
横向きにして２列にならないと思ったら、向きを変えた度に読み込み直さないといけないようだ。どうやらレンダリングエンジンが特殊なようで他レイアウトが崩れたり、右下に表示される青い矢印が表示されなかったりと相性はあまりよくないようだ。
実機検証はやっておく
スマホに対応させるのなら実際に端末を使用して閲覧しておいたほうがいいだろうか。もちろん全部律儀に検証するつもりはないのだが、それでもちゃんと実機で動かして確認したほうがいいだろう。
アンドロイド開発ツールやその他ＰＣ用ブラウザにはエミュレーターなどを利用して、パソコンだけで済ましてしまうことも可能だろうが実機でないと分からないこともある。
例えばこのブログはＰＣサイトでは黒い背景文字色をグレーに設定しているが、スマホサイトは白文字にしている。最初黒背景は目がチカチカするということを聞いたので文字色をグレーに設定していた。
スマホは屋外で閲覧することがある
ただしこの対策にも例外もあるようでスマートフォンを屋外で閲覧すると灰色の文字が太陽光でつぶれてしまって読めなかった。これに気づいてすぐにスマホ用サイトをすぐに白文字に戻したが、実際にスマホで閲覧せずにパソコンの画面だけを眺めていれば気づかなかったのではないだろうか。
まとめ
スマホサイト制作は一応これで終わりとするが、今後は記事を更新させながら柔軟に調整していく予定ではある。最近Wordpressで特定のページごとに表示させるウィジェットを変えるを見つけたので、そのあたりをいろいろといじっていく予定だ。
では今回はここまでにしておこう。それでは、またの機会に…
みかん魚
最新記事 by みかん魚 (全て見る)
- 100均のものでギターのピックアップを作ってみた（シングルコイル方式） - 2015/05/20
- 「チープトイ塗装」なんとなく動画紹介 - 2015/04/02
- １００円ショップダイソーのブザー付きＬＥＤライト - 2015/03/20