1

次の構成のWebサイトがあります。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=5.0;minimum-scale=1.0;user-scalable=1;" />

および div 要素と

<div style="position:fixed;top:0;left:0;width:100%;height:40px;">Fixed Header Content</div>

(ここで例を見つけることができます: http://massmatics.de/demo/test.html )

このサイトを iOS で閲覧し、ズームすると、この要素のサイズは大きくなりますが、ズーム領域からはみ出しています。

Android で同じアクションを実行すると (Android 4.x を搭載した Nexus タブレットでテスト済み)、固定要素はズーム中に消えますが、このアクションが終了すると、ズームされた領域に増加したバージョンで表示されます。

クロムの動作は正しいと思いますが、私の質問は次のとおりです。

Android で iOS と同じ動作をする方法はありますか?

私が尋ねている理由は、小さなデバイスで表示するときにズームする必要があるページに多くのコンテンツがあるためですが、Android では拡大された固定要素がすべてのスペースを占めているため、ズームは実際には利点ではありません。

よろしくお願いします

更新: 私は自分の例に position:fixed の JS 実装を追加しました (パフォーマンスが悪いことはわかっていますが、テスト目的のためだけです) - それでも position:fixed と同じ動作です。ユーザーがページをズームするかどうかのイベントはありますか?

4

1 に答える 1

0

position:fixed のサポートは、昨年 iOS5 で追加されたばかりです。私の経験からすると、Android はそのような要素を一貫して処理しません。

あなたがやろうとしていることを達成するための唯一の予測可能な方法は、すべてを JavaScript で結び付けることだと思います。おそらくあなたが望んでいた答えではありませんが、モバイルでは position:fixed が適切な解決策になることはめったにありません。

于 2012-12-06T22:04:05.057 に答える