ホーム > Web制作 > スマフォ(Android、iPhoneあたり)ではCSSのposition:fixedは使えない?

スマフォ(Android、iPhoneあたり)ではCSSのposition:fixedは使えない?

まだ実務レベルではスマートフォン向けのサイトを手がけたことはほとんどないんですが、今日納品したサイトで、たまたま確認して気づいた点があったので軽くメモ。詳しいことはまた自分のそれ向けブログで残すつもりですが。

最近よくみかける固定表示。フッターとかヘッダーとかサイドメニューとか。

これをCSSで実装するにはposition:fixedを使うと思いますが(一手間増えますが、いちおうIE6にも対応可能)スマートフォンのAndroidやiPhone(iPadも)ではこれはうまいこと動かないことがわかってちょっとびっくり。

スマートフォンはHTML5、CSS3を積極的に使って問題ない、そうすべき的な調子の記事等をよく見るので、PC版でちゃんと機能していれば問題なくAndroid、iOS端末でもいけると思ったんですが、これがとんでもない。

まず、AndroidでもiOSでも、このプロパティに対応したのはけっこう最近だそうで(Androidはバージョン2.2以降、iOSは5からとか)そのせいか、その対応が超微妙、いや、ほとんど実用レベルではないという現状のようです。

AndroidではPC向けに実装したものでは固定メニューは固定されません。固定させるにはmeta要素のviewport属性に「user-scalable=no」を追加する必要がありますが、これを追加すると同じviewport属性のひとつ「width=device-width」が効かなくなります。(左上の原点を基準に極部が拡大された状態になってしまう)この症状は自分が確認した実機(GALAXY S2 LTE)のみかもしれませんが。

iOSでは(というよりはMobile Safariということになるのかな?Androidもそうだけど)PC向けに実装したソースで固定は実現されます。が、固定部分にリンク要素があった場合、最初にタップした部分のリンクは有効(リンク先に遷移します)ですが、そのまま他のメニュー(リンク)をタップしても反応しません。(リンク先に遷移しない)ただ、スクロールする部分をちょっとでもスクロールさせると、なぜかリンクが有効になります。(タップできるようになる)気づくのに随分時間がかかりましたが。

ということで、とりあえず現状(2012/06/19時点)では、AndroidやiOSデバイス向けに固定メニューを実現するにはCSSのposition:fixedは使えないようです。

まだ実際に使ってないですけど、対応させるとしたらiScroll.jsとかでしょうか。

今後本格的にスマートフォン向けの案件に関わるようになったら、このへん(バグ等)でけっこう苦労しそうだなぁ。。


ホーム > Web制作 > スマフォ(Android、iPhoneあたり)ではCSSのposition:fixedは使えない?

検索

ページの上部に戻る