ページ上にオーバーレイとして表示されるモバイル アプリケーション (GWT で) を作成しています。ページ自体には、制御できないコンテンツが含まれており、viewport メタ タグがありません。ページのコンテンツはモバイル ビュー用に最適化されていませんが、オーバーレイ内のアプリケーションは最適化されます。そのため、ページはズームされている可能性がありますが、このアプリケーションでは、完全に表示されるようにビューポートを変更する必要があります。
表示を最適化し、アプリケーションを全画面表示にするために、アプリの起動段階で、ビューポート メタ タグが次の内容で変更/追加されます
width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes
。これは、ユーザーが最初にページを拡大または縮小しない限り、完全に機能します。ユーザーが最初にズームしたとき (この場合はズームアウトしたとき)、ビューポートは変更されますが、ビューポートはブラウザーのビューポートに縮小されません。
この問題を説明するために、画面記録を作成しました。最初にズームアウトしますが、ページ全体が既に表示されているため、元に戻ります。次にボタンをクリックすると、1 秒後にビューポート メタ タグが追加されます。ブラウザの背景が表示されるようになりました。
意見
ボタンをクリックする前にズームしないと、正しく機能します。
ビューポート メタ タグを延期し、ビューポート タグの内容を変更して、サイズ変更を呼び出してみました。これまでのところ何も役に立ちませんでした。
デバイスを回転させるか、ユーザーのズーム アクションを実行すると、コンテンツはブラウザーのビューポートと一致します。
そのためのサンプル コードを作成しました (GWT/Java):
GWT サンプル コード