2014年10月23日(木) 11時11分24秒 [Web関連]

PC用デザインのままでスマートフォンでも(それなりに)見えるようにする対策としてinitial-scale=0.5を書いた話

ウェブサイトへのアクセスに、スマートフォンやタブレットなどの小型端末も使われるようになってきました。それらのアクセス数は、もはや無視はできない割合になっています。
うちの個人サイトに関して言えば、だいたい28％くらいがスマートフォンやタブレットなどのスマートデバイス経由のアクセスです。

最も望ましいのは、レスポンシブWebデザインを採用して、スマートデバイスだろうが何だろうがうまく表示できるようにスタイルシートを記述することなんですが、今はそこまで個人サイトの改良に手をかけている余裕がありません。(^_^;)
そこで、とりあえずのスマートデバイス対策として、HTMLのhead要素内に以下の1行を加えてみました。
これは、モバイル端末で表示された場合に、アクセス直後の表示倍率を0.5に設定するという指示です。

スマートデバイス向けウェブサイトを作る際、たいていはここに「initial-scale=1」と指定します。でも、その場合は、CSSを使っていろいろスマートデバイス用のレイアウトを作成しておかないと、あまりうまくは表示できません。

今必要なのは、PC版と同じレイアウトを使いつつも、スマートデバイスでもそこそこ読める感じにする、という消極的な対策です。(^_^;;;
そのためには、「initial-scale=0.5」くらいが望ましいかなと思いました。

スマートフォンでも、PC用ウェブをそのまま表示可能ではあるが

そもそもウェブサイト側に何も手を加えなくても、スマートフォンでもPC用ウェブサイトをそのまま表示することは可能です。
ただ、その場合は、「横幅920px程度で表示した場合」の状態で描画した後、端末サイズにまで縮小されて表示されます。
さすがに、そこまで縮小されてしまうと、4インチ程度の画面では小さくなりすぎて読みづらいんですよね。（横置きなら読めなくもない気もしますが。）

下図は、iPod touch(第5世代)のSafariを使って、うちのブログを表示してみた例です。
左側が何も指定しないデフォルトの状態。右側が「initial-scale=0.5」を指定した状態です。

（クリックで拡大）

これが4インチサイズの画面で表示されることを考えると、デフォルトの状態では小さくなりすぎてて読みづらいです。でも、「initial-scale=0.5」を指定した方なら、まあ読めるのではないかと思います。（人によるとは思いますが。）

ズーム機能では、読みやすさは向上しない

小型のスマートフォンでも、指を使ってズームすれば文字も拡大できます。
……とはいえ、「スマートデバイス用ブラウザでのズーム」は、「PC画面でブラウザのウインドウ幅を変更する」のとは動作が異なり、（たとえウェブサイトをリキッドレイアウトで作成していても）改行位置は変わりません。ズームすると、たしかに文字は拡大されますが、文章が画面からはみ出してしまうので、長文がとても読みにくくなってしまいます。
つまり、「デフォルトの状態」でも「ズーム状態」でも、どちらでも読みづらい……ということになってしまいます。

このように、PC向けウェブサイトに何も手を加えないでいると、小型端末では「読めなくはない」という程度であって、「読みやすい」状態にはなりません。

なので、最も望ましいのはさっきも書いたとおり、レスポンシブWebデザインを使ってCSSを書くことなんですが(^_^;)、それをする時間的余裕がない……という場合には、たぶん「initial-scale=0.5」くらいなら、（4インチくらいの画面サイズの端末でも）なんとかズームしなくても読めるんじゃないかな、と思いました。

※冒頭で、うちの個人サイトでは「だいたい26％くらいがスマートデバイス経由のアクセス」だと言いましたが、そのうちの53％（つまり全体の約14％）はiPhoneからのアクセスです。なので、とりあえず「画面が4インチ程度で、横幅が640ドット（ブラウザの仮想的な横幅は320px）」である端末を基準にして考えました。

本当の意味での実寸サイズ表示

Viewportの値に「initial-scale=1」と指定した場合、アクセス直後の表示倍率は「1」になります。
が、これは、端末の物理的な画面サイズに合わせるという意味ではありません。
例えば、画面の物理的な解像度が640×1,136であるiPhone5などの端末では、「initial-scale=1」を指定した場合のブラウザの解像度は（物理的な解像度の半分の）「320×568」になります。
これは、高精細ディスプレイを搭載しているため、標準で「2倍のサイズにズームして表示」する仕様になっているからです。
その辺の解説は、先日、All Aboutで記事にしましたので、そちらもご参照下さい。(^_^;)
→「CSSの1pxは 液晶画面1ドットで表示されるとは限らない」

で、このような「Device Pixel Ratio」が「2」である端末では、表示倍率を0.5に設定する「initial-scale=0.5」の記述を使うと、『液晶画面の物理的な1ドットを使ってウェブ上の1pxを描画する』という意味にもなります。
本当の意味でも実寸サイズ表示です。（それが望ましいと言っているわけではありませんが。ただ、それならウェブページ上のピクセルは潰れないので「小さくなりすぎる」ことはないだろう、くらいのことです。）

まあでもやっぱり、最終的にはレスポンシブWebデザインが

というわけで、ウェブサイトを「PC用デザイン」にしたまま、とりあえずスマートデバイス対応策としてViewportの値を「initial-scale=0.5」にしてみた、という話でした。

うちのサイト内では、今のところブログの個別エントリページにしかこの指定はしていません。スマートデバイス経由でのアクセスの多くは、検索サイトからブログの個別ページに飛んでくるアクセスなので。(^_^;)
（※まだ全ページには適用しておらず、ここ数日に更新したページにしか適用されていませんが。）

さすがに、トップページみたいな込み入ったレイアウトをしているページを対応させるには、レスポンシブWebデザインを使うしかなさそうなので、そこは後々考えます。^^;

というか、別に「initial-scale=0.5」を書けばそれで良い、と思っているわけではないのです。ただ、余裕がない中で、簡単にそこそこうまく表示できる方法として使ってみただけで。
やはり、ウェブサイト全体でレスポンシブWebデザインを採用しないとダメですよね。これからは。