iPadで-webkit-text-size-adjust: none;を指定していても、拡大されるという現象に出会う

これは、新しいiPadで検証したときに遭遇しました。iPad2以下では検証はしていません。

全く別の話ですが、新しいiPadの正式名称って「新しいiPad」でいいのでしょうか。正式名称ってなんだろうとずっと不思議に思っています。

-webkit-text-size-adjustプロパティ

-webkit-text-size-adjustプロパティを知らない人に向けて説明すると、iPhoneやiPod Touch、iPadなどはiOSの仕様として横向きにすると縦の時より自動的に文字サイズが大きくなります。これを止めたい場合に用いられるWebKit独自のプロパティです。

拡大をやめる場合のCSS

body {
	-webkit-text-size-adjust: none;
}

上記のように書くと横向きにしても自動で拡大されないようになる。はずなのだが、今回のケースは、iPadでは、指定していても拡大されたのです。

※ちなみに、iPadでしか検証していないです。iPhoneでは検証していません。

解決方法

問題はひとまず解決したのですが、下記のようにmeta要素を変更したことにより、自動での拡大を止めることができるようになりました。

変更前

<meta name="viewport" content="width=device-width">

変更後

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

もともとピンチイン/アウトできるようにしていたのですが、これをできないようにviewportを変更したことで拡大はされないようになりましたが、要件を変更することになったので、解決とは言えないかもしれません。

そもそもそういう仕様なのかもしれないけど、maximum-scale=1.0, user-scalable=no が最強だということがよく分かったという今回のケースでした。