6

モバイルで表示するために最適化されたWebページがあります。

デバイスの幅を検出し、ビューポートの幅をそれに設定するviewportメタタグを利用しています。<meta name = "viewport" content = "width = device-width">これは、私のWebページがばかげてズームアウトされているように見えるのではなく、モバイルブラウザに正しく読み込まれることを意味します。

携帯電話（Samsung Galaxy S2）にポートレートモードでページを読み込むと、見栄えが良く、横向きに回転すると見栄えが良くなりますが、もう一度ポートレートに戻すと、ページがわずかに拡大されます。ズームアウトするか、水平方向にスクロールする必要があります。

私のモバイルブラウザがこれを行うのはなぜですか？どうすればそれを防ぐことができますか？

何が起こっているかを視覚的に確認するには、スクリーンショットを参照してください。

ここに画像の説明を入力してください

4

2 に答える 2

0

向きを変更した後に resizeEvent が発生していても、拡大して横長のビューポートを埋めるためにデバイスがズームをリセットできていないようです。

向きの変更後にディスプレイのサイズを適切に変更するには、次の両方を実行する必要がありました。

(1) minimum-scale=1 に設定します。

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0">

(2) CSS ファイル内:

body {
 height: 100vh; 
 height: -webkit-fill-available; 
 min-height: 100vh; /* Fallback for browsers that do not support Custom Properties */
 min-height: -webkit-fill-available; 
}
于 2020-07-11T18:03:59.930 に答える