Mobile Safariで際限なく拡大できても微妙なので，max-scaleを指定する
Posted: Updated:
制作中の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というデバイスの解像感として比べると，結構な違いなんですが．
ビフォー
アフター
最後にscale系の項目について軽く補足
initial-scale : 拡大倍率の初期値．iPadなんかだと無指定でもデフォルトでちょっと拡大されています．
minimum-scale : 拡大倍率の最小値．100%でいいでしょう．
maximum-scale : 拡大倍率の最大値．今回はこれの指定が主目的．これを制限します．
機能（今回の場合は拡大操作）がオーバーランしてしまわないように，制約のバランス取りをデザインするのも必要という考えです．地味ですが，ローコストな調整なので想定されるのであれば，積極的に調整していきたいところ．