スマホ向けサイトの文字を拡大できるように設定してみた

phone001Twitterで流れてきた記事を読んで、自分のスマホサイトの文字の拡大ができなかったので、拡大できるように設定を修正した、というお話です。

読ませた頂いた記事はこちら。

スマートフォンサイト制作で「なんで拡大縮小できるようにしてるの?」と言われた時の対処法 | Border/memo

 

スマホサイトの場合、デバイスごとの表示領域を指定するのに、下記のようなmetaタグを設置するのが一般的かと思います。

<meta name="viewport" content="●" />

●の部分に、スマホサイトの表示制御に関する記述を入れるわけですが、私のサイトを見てみると以下のような指定になっていました。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

 

contentで指定されている値を順に説明すると、

width
スマホの表示領域の指定です。ディスプレイの大きさがいろいろあるので、device-widthと指定し、各端末の幅に自動的に合わせるのが一般的のようです。
initial-scale
スマホで最初にウェブページを表示したときの拡大率です。1を指定することで、iOS 5 以前の表示で本体を横向きにしたときの拡大率のバグが避けられるようです。
user-scalable
表示されたコンテンツの拡大・縮小の操作を許可するかどうかしていです。noで文字通り、操作を拒否する感じです。
minimum-scale
ユーザーがスマホ上で縮小できる範囲を0.5から2の倍率の範囲で指定します。
maximum-scale
ユーザーがスマホ上で拡大できる範囲を0.5から2の倍率の範囲で指定します。

という感じです。先の自分のviewportの指定だと、user-scalable=no という設定で文字の拡大ができなくなっていたんですね。

 

文章を読む人の事を考えると、ちょっと不親切な気がしたので、自分のスマホサイトについては、参考にした記事の通り、下記の指定に変更しました。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

拡大・縮小に関する設定を削除し、表示倍率だけディスプレイに合わせたという感じです。初期表示で問題がなければ十分ですしね。

最近のスマホの場合だと、initial-scale の指定も要らないかもしれません。この辺は実際の端末で、表示を確認して判断すれば良いかと思います。

 

今のところ、自分のサイトについては、特に不具合はありません。

文字の拡大とか縮小とかは、ユーザーが自発的に行う操作ですから、任せたほうが親切ですよね。