スマホ対応

スマホ対応(iPhone特有)

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

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

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

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

/**
 * 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 */
}

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