iOSにおけるviewportの指定方法による細かい違い

iOSではviewportの指定方法が異なると細かいデバイスの挙動が変わってきます。

検証はiPhone(iOS6.1)のみで行っているのでiPadやiOS7ではちょっと違うかも。

まず、以下のような数値によるviewport指定をPCモードとし、

<meta name="viewport" content="width=960px">

以下のようなdevice-widthによるviewport指定をSPモードとして解説を進めていきます。

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

ズーム率

ピンチインピンチアウトで拡大できる上限は、PCモードでは15倍、SPモードでは5倍まで拡大可能です。

ダブルタップの挙動

テキストが記述された要素などをダブルタップすると、PCモード、SPモード共にそのテキストが画面にフィットするように拡大されますが、SPモードでは最大拡大率が1.6倍までにしか拡大されません。

position:fixedの挙動

ピンチインピンチアウトやダブルタップにより画面が拡大された場合、SPモードではposition:fixedの指定がposition:staticの状態に変更されますが、PCモードではposition:fixedの状態が保たれます。これによりPCモードでは拡大した際にposition:fixedを指定した要素が画面内に常にいるようになり結構邪魔になりますので、PCモードを利用する場合はposition:fixedは利用しないほうがよいでしょう。

関連エントリー

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
Android、iPhoneではbutton要素にtext-overflow:ellipsisが適用されない
iPhoneのclickイベントの挙動
iOS6でtransitionアニメーションが少し遅れて開始する問題
iOS6のリモートWebインスペクタ

スポンサードリンク

«Sassで&による親セレクタ参照 | メイン | レスポンシブWebデザインに対応した「jquery.heightLine.js」»