Blog

【Android】標準ブラウザでのposition:fixedについて

2016/01/18

スマートフォン

Androidの標準ブラウザのみposition:fixedが効かないことがわかり修正をしました。

参考サイト
Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ

比較的修正は簡単で、viewportにuser-scalable=noを追加するだけです。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

ヘッダーや「トップに戻る」などをposition:fixedにしていますので、
これで無事解決しました。

しかし、問題点があります。
ser-scalable=yesになっている場合、ピンチイン、ピンチアウトで画面の拡大縮小ができるのですが、
ser-scalable=noにするとピンチイン、ピンチアウトが使えなくなります。

この問題については、下記サイトを参考にしました。
user-scalable=noを使う理由と弊害(スマホのviewportを見直す)

他にいい対応策がないか考えてみたいと思います。

カテゴリー

月間アーカイブ

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ