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

【问题标题】：Is the mobile viewport size based on browser or the screen resolution?移动视口大小是基于浏览器还是屏幕分辨率？
【发布时间】：2017-05-11 04:41:21
【问题描述】：

手机的视口是根据屏幕分辨率还是手机浏览器？以下是一些流行的移动浏览器视口大小：

-Opera Mobile 浏览器视口 850px

-iPhone safari 浏览器视口 980px

-iPad（横向和纵向模式）视口 980px 移动设备？ -Android 浏览器视口 800px

-IE 移动浏览器视口 320px source。但是视口大小是否按

的分辨率缩放

【问题讨论】：

标签： css mobile viewport pixel screen-resolution

【解决方案1】：

移动视口大小基于 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】：

从技术上讲，移动设备具有两种视口尺寸，布局视口和视觉视口。

布局视口是固定的，因为它基于物理设备屏幕的宽度和高度。它的维度可以通过 JavaScript 中的 screen.width 和 screen.height 属性以及 CSS3 中的媒体查询的device-width 属性访问。

视觉视口由浏览器窗口的宽度和高度决定。它的维度可以通过 JavaScript 中的 window.innerWidth 和 window.innerHeight 属性以及 CSS3 中的媒体查询使用 width 属性来访问。

【讨论】：