Mobile Safariで際限なく拡大できても微妙なので,max-scaleを指定する

制作中のWebアプリに突如,iPadでの動作が要件追加

少し泣きそうでしたが,思ったより何とかなりそうだったのでmetaタグを入れて出来る範囲のチューニングを加えたのでメモします.

周辺条件としては以下のような感じ.

  • 利用者の年齢層がちょっと高め
  • 内容的にテキストデータが読めればOK
  • 一番小さい文字をMAXで拡大したときに程良くなるように
  • 拡大のしすぎで全体感を失い,オロロってならないように
  • あんまり拡大しすぎると画像も粗くなるし

ってことで,拡大操作をコントロールできるように調整.初期値で100%,最低でも100%,最大で160%の拡大を指定しています.

<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.6" />

デフォルト最大倍率との違い

参考までに.こうして画像にしちゃうとあんまり変わらないですね・・・.iPadというデバイスの解像感として比べると,結構な違いなんですが.


before

ビフォー

after

アフター


最後にscale系の項目について軽く補足

initial-scale
拡大倍率の初期値.iPadなんかだと無指定でもデフォルトでちょっと拡大されています.
minimum-scale
拡大倍率の最小値.100%でいいでしょう.
maximum-scale
拡大倍率の最大値.今回はこれの指定が主目的.これを制限します.

機能(今回の場合は拡大操作)がオーバーランしてしまわないように,制約のバランス取りをデザインするのも必要という考えです.地味ですが,ローコストな調整なので想定されるのであれば,積極的に調整していきたいところ.