2019年の時点で、Mobile Safariを含む<div>をブラウザウィンドウに正確に合わせる方法
私は1ページのWebアプリに取り組んでいます。これは、モバイルデバイスで最も一般的に使用されます。その機能の1つはマップモードで、ブラウザウィンドウ全体を一時的に引き継ぎます。距離スケールといくつかのコントロールは、マップの四隅に接続されています。これが地図の小さなスクリーンショットですので、私が何を話しているのかわかります。 マップはAとして実装される<div>とposition: fixed、すべての4点の座標ゼロ。また、マップが表示され<body>ているoverflow: hidden間に一時的にをに設定して、基になるアプリの表示が原点から離れるようにスクロールされる場合を処理します。これで、マップをデスクトップブラウザで正確に機能させることができます。モバイルブラウザーでも"width=device-width,user-scalable=no"、ウィンドウの表示領域をビューポートに正確に対応させるために、メタビューポートタグにのようなものを指定する必要がありました。 私が最初にこのアプリを書いたとき、これはすべて美しく機能しましたが、iOS Safariは、スケーリングに関連するメタビューポートオプションのいずれかを尊重しなくなりました。まだズームできません。現在、このブラウザーでマップを有効にすると、わずかに拡大されたビューが表示され、右側と下部のボタンが切り取られ、何もできなくなります。、すべてのタッチが、ブラウザのスクロールではなく、マップのズーム/パンジェスチャとして解釈されるためです。これらのボタンからアクセスできる機能がないと、マップはそれほど役に立ちません。右上のボタンがないと、マップを閉じることさえできません。唯一の方法は、ページをリロードすることです。これにより、保存されていないデータが失われる可能性があります。 history.pushState/ の使用を確実に追加しonpopstateて、マップオーバーレイが別のページのように動作するようにします。ブラウザの[戻る]ボタンを使用してマップモードを終了することはできますが、ボタンがないために機能が失われることによる残りの問題には対処できません。 を使用.requestFullscreen()してマップオーバーレイを実装することを検討しましたが、それ以外の場合にアプリが使用できるすべての場所でサポートされるわけではありません。特に、それは明らかにiPhoneでは機能しません。iPadでは、ステータスバーとコンテンツに重なる巨大な「X」ボタンが表示されます。私の距離の目盛りはもう読めないでしょう。とにかく、意味的に私が本当に望んでいるものではありません- 全画面ではなく、全ウィンドウが必要です。 最新のブラウザでフルウィンドウ表示を機能させるにはどうすればよいですか？この件名で見つけることができるすべての情報は、メタビューポートタグの使用について語っていますが、前述のとおり、これは機能しません。