4

HTML5 でモバイル デバイス用の固定トップバーを実装しようとしています。これは、ユーザーが Web ページをズームイン/ズームアウトしても固定されたままです。

私がJqueryモバイルで見た限りでは、固定トップバーを実現するためにズームイン/ズームアウトを無効にしています。

Google は独自のコンテンツ スクロール実装を作成して、gmail アプリケーションの固定トップバーを作成しました。しかし、彼らはズームも許可していません。

誰かがこれに対する回避策を知っていますか? ズームイン/ズームアウトするときにjsを使用して新しい領域の上部にあるバーを再配置できるかどうか知っていますか?

更新:ズームを無効にしない固定トップ バーの例があるこの投稿を見つけましたが、ズームイン/ズームアウトすると上部にとどまりません。

また、IO で Safari のドキュメントを見ていましたが、新しいズーム領域の相対位置を取得する方法が見つからないため、ズームイン/ズームアウト イベントごとに上部にあるバーを再配置できます。

4

2 に答える 2

1

Apple は、ズームを処理するために特別な META タグを実装しました。

<meta content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

これにより、iPhone でのズームが無効になり、Android でも動作するはずです。

希望するズーム効果については、ズームを完全に無効にし、jQuery と CSS Webkit トランジションとアニメーションを使用して 100% 行うことをお勧めします。

#some-div {
    -webkit-transition: all 0.5s ease-out;
}

ズームを行うその他の jQuery ライブラリを次に示します。

うまくいけば、これが役に立ちます！

于 2012-11-04T08:07:24.357 に答える