Question

移动电话中的视口是基于屏幕分辨率还是移动浏览器？以下是一些流行的移动浏览器视口大小：

-Opera移动浏览器视口850px

-iPhone safari浏览器视口980px

-iPad（landscape＆amp; portrait mode）viewport 980px 移动设备？ -Android浏览器视口800px

-IE移动浏览器视口320px source。但视口尺寸是否按照

的分辨率缩放

Answer 1

从技术上讲，移动设备具有两种视口大小，即布局视口和可视视口。

布局视口是固定的，因为它基于物理设备屏幕的宽度和高度。可以使用JavaScript中的font-size和line-height属性以及screen.width访问其维度，以便在CSS3中进行媒体查询。

可视视口由浏览器窗口的宽度和高度决定。可以使用JavaScript中的screen.height和device-width属性以及window.innerWidth访问其维度，以便在CSS3中进行媒体查询。

Answer 2

移动视口的大小基于CSS像素比率，例如，我的设备（Mi A1）的分辨率为1080x1920，CSS像素比为2.55，此设备上的视口计算为

（1080 / 2.55）x（1920 / 2.55）= 424 x 753。

2.55的像素比意味着设备上每2.55的物理像素CSS会映射1个像素。由于当今的手机在小屏幕上具有更高的分辨率， CSS中的媒体查询引用的是计算出的视口，而不是物理分辨率，这是因为在手机上渲染页面时由于移动设备的空间较小而可以提供更大的页面视图。

而笔记本电脑则不是这种情况，因为分辨率越高，笔记本电脑的体积就越大。我的笔记本电脑的屏幕分辨率为1366x768像素，当我检查其视口大小时，默认缩放（在全屏模式下查看）为1366x768。

Check yours on this pen

<body>
    <p id="vpPara"></p>
    <p>Changes with zoom-in and zoom-out</p>
    <span id="vpSpan"></span>
    <p id="screenPara"></p>

    <script>
        document.getElementsByTagName("body")[0].onload = function(){ vpSize();}
        document.getElementsByTagName("body")[0].onresize = function(){ vpSize();}

        var cnt = 0;
        function vpSize() {
                cnt += 1;
            var w = document.documentElement.clientWidth,
                h = document.documentElement.clientHeight,
                screenW = screen.width,
                screenH = screen.height;

            //document.getElementById("p1").innerHTML = w + "x" + h;
            document.getElementById("vpPara").innerHTML = "Viewport Resolution :" +  w + "x" + h;
            document.getElementById("vpSpan").innerHTML = "resize called "+ cnt +" times";
            document.getElementById("screenPara").innerHTML = "Screen Resolution :" +  screenW + "x" + screenH;
        }

    </script>

</body>

移动视口大小是基于浏览器还是屏幕分辨率？

2 个答案: