スマホ対応

スマホ対応(iPhone特有)

スマホ対応の業務で悩んだ点がありましたので、メモ φ(..)メモメモ
PCでのシュミレータでは起こらないのですが、iPhone実機では起こる現象です。
Androidでも起こらない事象です。

コントロールしているはずの文字サイズが反映されません。

原因は、iPhoneが自動で見やすいとされるサイズに、自動調整(こちらの設定を無視して)おこなっているようです。
そこで対応。

引用:http://m.designbits.jp/13031617/
情報ありがとうございます。
-webkit-text-size-adjust: 100%; がポイントらしい
-webkit-text-size-adjust: none; だと文字の拡大ができなくなるので注意。noneでなく100%
例:

[html]
/**
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
[/html]

Normalize.css を使うのがよさそう。