このエントリーをはてなブックマークに追加

iPhone、Android position:fixed 対応状況と対応方法

スポンサード リンク

iPhone、Androidなどのスマートフォンは、これまで position:fixed に対応していませんでした。
固定メニューの実装などに困っていたのですが、iOS 5で対応していました!

対応状況

iOS 5

iPhoneやiPad、iPod TouchのMobile Safariは、iOS 5から position:fixed に対応しました!
他にも、overflow:scroll などに対応しています。
via New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5

Android 2.3

viewport で、content="user-scalable=no" にすると対応できます。

Android 4.1

対応しています。

対応方法

iOS 4や、Androidで position:fixed に対応するには、JavaScriptなどで対応が必要です。

jQuery Mobile

jQueryプラグインです。様々なデバイスに対応可能です。
結構ガッツリ最適化されたUIを実装します。固定メニューを作成可能です。
jQuery Mobile
ライセンス:MIT or GPL Version 2 licenses

iScroll

有名な、固定メニューを実装するためのJavaScriptライブラリです。 WebKit向けで、iPhone、Androidともに対応可能です。
jQuery Mobileほどではないですが、モバイル向けに最適化されるため、 PCでは適用されないようにする必要があります。
iScroll
ライセンス:MIT license

JavaScript

下記では、positionの5つ目の値として、position:device-fixed が提案されています。 ぜひインプリメントしてほしいところですが、その動作サンプルとして、JavaScriptによるデモがあります。 上記ふたつよりもシンプルに実装可能です。iPhone、Android、BlackBerry対応。
The fifth position value
デモ

BLOGを購読する

Twitter