2

ページ上の位置が固定されている (任意の隅にピン留めされている) 要素があります (これは必ずしもメタ ビューポート タグを制御できるとは限りません - これはサード パーティ サイト用の埋め込みウィジェットです)。Mobile Safari で、ユーザーが特定のポイントでページをピンチ ズームすると、ビューポートが表示領域よりも大きくなります。その時点で、固定位置要素はビューポートにアタッチされたままになり、必ずしも可視領域にあるとは限りません。

表示領域の幅とビューポートの幅の 2 つの幅を比較したいと思います。可視領域のサイズは window.innerWidth だと思います。ビューポートの測定方法がわかりません。

私は次の関係を見ようとしてきました：

  • document.documentElement.clientWidth
  • 画面の幅
  • window.innerWidth
  • window.outerWidth

...しかし、明らかなものは何も見えていません。

4

1 に答える 1

0

これは見苦しいですが、ほとんど機能するコードを示しています (iOS で表示して動作を確認してください。デスクトップを使用し、ページの右上にある [編集] をクリックしてコードを表示または編集します)。

https://jsbin.com/jopamu（iOSのみ）

「オーバーズーム」計算のトリックは厄介ですが、複数のビューポートのズームをある程度補正します。競合する問題があるため、解決するのは複雑な問題です。

  • ピンチズーム
  • 入力フォーカスによるズーム
  • 「位置:固定」ズーム
  • 潜在的にOS（アクセシビリティ）ズーム

私が見つけた可能な解決策は次のとおりです。

  1. 上記の計算と position:absolute を使用してメニューを配置します - onscroll イベントで左/上を更新します。ぎこちないジャダーがあります (非表示にして、ズーム/スクロールが終了したときにのみ表示することで少し改善できます)。

  2. position:fixed を使用してメニューを配置しますが、左/上を変更して、ズーム/スクロールが発生したときにメニューの位置を修正します。ジャダーははるかに少ないですが、100% 信頼できるとは言えませんでした (いくつかの競合状態)。

  3. あなたのケースには適していません (物事を壊すリスクがあるため、非常にお勧めしません): touchstart のデフォルトをキャンセルすることで、ピンチ ズームと iOS10 のダブルクリック ズームを防ぐことができます。他の多くの回避策が必要なため、通常のタッチが機能し、合成スクロールとズームが必要なため困難です（ただし、スクロールが機能しないなどの醜い副作用があり、音声アクセシビリティがオンになっている場合などのアクセシビリティにも干渉します）.

幅だけを見たい場合は、古いバージョンを使用してください: https://output.jsbin.com/jopamu/6

于 2016-09-28T04:44:54.760 に答える