1

私が理解しているように、ビューポートの幅とモバイル ディスプレイの画面の幅を決定するには、信頼できると思われる方法が 2 つあります。ビューポートの幅は仮想ピクセルで、画面の幅は物理ピクセルです。それが本来あるべき姿です。しかし、それは私にとってすべて同じです。次のページは、Android 4.0.4 のストック ブラウザと Chrome for Android の現在のバージョンでテストしました (番号はわかりません)。

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="info"></div>
<script type="text/javascript">
setTimeout(function () {
    var virtualWidth = document.documentElement.clientWidth;
    var physicalWidth = screen.availWidth;

    document.getElementById("info").innerHTML =
        'Virtual width: ' + virtualWidth + '<br>' +
        'Physical width: ' + physicalWidth + '<br>' +
        'Ratio: ' + (physicalWidth / virtualWidth);
}, 500);
</script>
</body>
</html>

結果は次のとおりです。

ストック ブラウザは両方の値で 540 を報告し、Chrome は両方で 360 を報告します。比率は常に 1 です。私の電話は Motorola RAZR i で、物理的な幅は約 540 (縦向き) で、比率は 1.5 である必要があります。このページ、メソッド、またはブラウザの何が問題になっていますか? ツールが完全に信頼できない場合、モバイル Web デザインを行うのは非常に困難です。(そして、Chrome のランダムなテキスト サイズについてはまだ話していません...)

更新:これは、独自のテストを行うためのライブ URLです。そのQRコードを取得します。

4

0 に答える 0