34

HTML Web サイトでは、次のような固定要素があります。

<div id="fixed">
  <p>Some content</p>
</div>

次の CSS があります。

#fixed { height:150px; position:fixed; top:0; left:0; z-index:10000; }

このページをモバイル デバイス (またはタッチスクリーン対応デバイス) で表示し、画面をピンチしてズームインすると、固定要素が他のすべてのコンテンツと共にズームインします (大きくなります)。十分に拡大すると、その下にあるすべてのコンテンツがほぼ完全に重なるほど大きくなります。

実際の使用例は、上部の固定ナビゲーション バーや画面の隅にあるフローティング ボタンのような UI です。

ブラウザーで単一の要素のサイズが変更されないようにし、常に同じサイズに保つにはどうすればよいでしょうか?

4

3 に答える 3

26

この回答のデモ この回答
に基づいて作成したダイアログウィジェットライブラリ。
ダイアログ ウィジェットのデモモバイルで試して、ズームしてリンクをタップしてください。

ジェスチャー イベントは何かの倍率に関するメタデータを保持しているように見えますが、制御して手動で見つけたほうがよいかもしれません。ユーザーがライブで動き回っている間も効果を維持したいので、スクロール イベントごとに再計算する必要があります。

window.addEventListener('scroll', function(e){ /* coming next */ })

ズーム倍率を計算し、CSS3 変換として再スケーリングされた要素に適用します。

el.style["transform"] = "scale(" + window.innerWidth/document.documentElement.clientWidth + ")";

これにより、要素は現在のビューポートのズームに対してズーム 1 の比率に再スケーリングされますが、ページ上にまだ正しく配置されていない可能性があります。これは、その位置の新しい値を取得する必要があることを意味します。画面上で実際に何が起こるかは、要素の CSS 位置の値に依存し、特にモバイル Safari とはfixed異なる動作をします。ページがズームされている間、位置が滑らかになる効果が追加されるため、この原因に対していくつかの不便な問題が発生します。目的のスケーリングされた要素の親として 100% のコンテンツの高さ要素を持ち、スクリプトで要素を親の内側に配置します。この例のデモでは、次の値が機能します。absolutefixedrelativeabsolute

overlay.style.left = window.pageXOffset + 'px';
overlay.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px';

スケーリングを有効にするアンカーポイントに応じて、CSS プロパティの使用にも注意を払う必要がありtransform-originます。これは配置に直接影響します。

于 2014-05-15T16:09:59.373 に答える
8

@bobsoap がやろうとしていたのと同じことをしようとしていますが、私の解決策は次のとおりです。

1. ビューポート タグでズームを無効にします。

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

2. 次のようなプラグインを使用します: TouchSwipe.js:

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

そして、必要に応じて必要な Div のみをズームインします。

ページに 2 つの div があります (左右)。左側の div には固定スクロール メニューがあり、右側には小さなテキストと画像があります。必要に応じてユーザーがテキストを読みやすくするために、ピンチ/ズームして適切な div ズームのみを使用したいと考えています。ビューポート全体をズーム可能にして左側の div のズームを無効にするのではなく、正反対のことを行っています。TouchSwipe プラグインを介して右側の div のみをズーム可能にします。

TouchSwipe プラグインの実装方法に興味がある人がいる場合は、完了したらコードを共有します。

于 2014-11-17T13:34:45.310 に答える
-4

width 属性がありません。max-width や max-height などを使用して、ボックスを必要なサイズに保つことができます。ただし、ズームを使用すると、ユーザーはページをかなり詳細に表示できるため、この問題が発生する可能性は常にあります。

#fixed { height:150px; width: 200px; max-width: 200px; max-height: 150px; position:fixed; top:0; left:0; z-index:10000; }
于 2013-03-05T20:37:04.793 に答える