LIQUID DESIGN Tech Blog

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
デモ

この記事を書いた人
LIQUID DESIGN のサービスに関するデザインや技術情報を発信します。
SNSでフォローする