2013年11月26日(火)
スマホの解像度 #■パソコン・通信

　不思議なもので、iPhone5cをゲットしたとたんに、スマホ用のホームページ作成依頼があり、急遽スマホの研究を進めている。まあ、そういう時代ということだ。

　結論として、ホームページ作成において、パソコン用とスマホ用と分けて作らねばならないだろう。インターネットや本では、分けなくてもいい方法とか、色々述べられているけどね。

　さて、スマホは、画面こそ小さいが、解像度は高いというのが、パソコンとの最大の違い。ブラウザ(Safari等)での表示や操作も異なる。

　iPhone5cの解像度は1136x640ピクセル(16:9)とあるが、縦長での閲覧で、表示幅640pxのところ、写真幅960pxがきちんと幅に収まって表示される。縮小表示されているのだ。ダブルタップで、文章や埋め込み画像が、表示幅に収まるように拡大縮小する等、操作も異なる。

　余談ではあるが、スマホにおいて、現在の最高解像度はフルHD(1920×1080)であるが、2014年にはWQHD(2560×1440)に、2015年にはUHD(3840×2160=4K)になり、液晶画面を折り畳めるようになるとの報告がある。今後、スマホ本体は、急激に進化するのだ。

　『子猫の手』では、携帯電話ブラウザや旧スマホでも表示できるように、表示幅480pxを基調としており、写真のサムネールは幅240pxとしている。解像度の高いスマホでは、ページを切り替える度に、拡大しなければならない等、完全対応していない。

　パソコン用Safariで表示できたら、スマホでも大丈夫だろうと踏んでいたのが大間違い。文字の大きさも、拡大すれば問題ないと考えていた。拡大すると横スクロールが発生し、縦スクロールのつもりが横ブレしたりして、閲覧性が悪くなる。やはり、あらかじめフォントサイズを大きく調整しておく必要がある。

　font-sizeでフォントサイズを指定すると、パソコンでよく利用する12pt,18pt,24ptが、大きく表示される。25pt以降は正確に表示されている。理屈は分からないが、記述次第では、ほぼ正確に表示できる。それでも12ptと24ptが若干大きい。

　フォントサイズをCSS3の新単位remで倍率指定したほうが便利とある。rem=root+em(M)という意味である。ほとんどのブラウザにおいて、ベースのフォントサイズが12pt(16px)なので、rootを1px/16px=6.25%にすると、remはpxと同じ数字で同じ大きさとなる。残念ながら、12pt,18pt,24ptに相当する16rem,24rem,32remが、大きく表示される。きっと、12pt,18pt,24ptが、特殊なフォントサイズなんだな。rootの数字次第では、もっとゲトゴトになる。実際には36pt以上でないと読みづらいので、小さいフォントは使わない。

　『子猫の手』では、パソコン表示で、看板21pt／見出し18pt／メモ12pt／写真サムネール幅240px／表示幅480pxを基調としている。スマホ表示のために、看板を24ptに変更して、２倍返し、３倍返し、４倍返し。remにおけるrootの数字を変更するだけで良いというわけか。

　スマホのホームページ作成で重要なことは、フォントサイズと埋め込み画像のサイズを、切り離して考えるということだね。

　くどくど言ってきたが、現状を簡潔に整理すると、iPhone5cにおいて、ちょっと以前のパソコンの幅1024pxを、スマホの幅5cmに、960px相当で表示しているということだ。

P.S.Androidスマホは、新徳くんに今夜試してもらおう。

P.S.2新徳くんに試してもらうのを忘れていた。
http://neconote.jp/sp/