0

メインの HTML ファイルでは、viewport の次の行が指定されています。

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

実験：

widthfromdevice-widthを更新して640、初期化時に次のコードを JavaScript ファイルに追加しようとしました。

alert("Viewport - Width: " + $(window).width() + "Height: " + $(window).height());
alert("Device - Width: " + window.screen.width + "Height: " + window.screen.height);

結果：

  1. Samsung Galaxy S3 (解像度: 720 x 1280):
    (a) width=device-width & width=640:
    ビューポート - 幅: 360、高さ: 615
    デバイス - 幅: 720、高さ: 1280

  2. iOS シミュレータ iPhone (Retina 3.5 - インチ):
    (a) width=device-width:
    Viewport - Width: 320 Height: 460
    Device - Width: 320 , Height: 480
    (b) width=640:
    Viewport - Width: 640 Height: 960
    デバイス - 幅: 320、高さ: 480

質問 1: Android WebView はビューポートの設定に基づいていないように思えます。テスト結果では、ビューポートの幅が 720 ではなく 360 になっています。「360」という値はどこから来たのですか?

質問 2: iPhone Retina 3.5 の解像度は 640 x 960 です。Retina ディスプレイのため、幅と高さでそれぞれ 320 と 480 を返しますか?

4

2 に答える 2

0

PPK によると、モバイル デバイスには 3 つのビューポートがあります。[続きを読む]

つまり、iPhone の理想的window.screen.widthなビューポート サイズの幅は 320px ですが、Android は 360px です。

これは画面密度に関連しています。たとえば、画面幅が 720 ピクセルの Andorid デバイスは、理想的なビューポート サイズに合わせて 2 倍にズームインします。

于 2016-09-08T07:32:14.733 に答える