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

本文介绍了移动视口大小是基于浏览器还是屏幕分辨率?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

手机中的视口是基于屏幕分辨率还是手机浏览器?以下是一些流行的移动浏览器视口尺寸:

Are the viewport in mobile phones based on the screen resolution or the mobile browser?Here are some popular mobile browser viewport sizes:

-Opera Mobile 浏览器视口 850px

-Opera Mobile browser viewport 850px

-iPhone safari 浏览器视口 980px

-iPhone safari browser viewport 980px

-iPad(横向和纵向模式)视口 980px移动设备?-Android 浏览器视口 800px

-iPad (landscape & portrait mode) viewport 980pxmobile device?-Android browser viewport 800px

-IE 移动浏览器视口 320px来源.但是视口大小是否按

-IE mobile browser viewport 320pxsource.But is the viewport size scaled by resolution of the

推荐答案

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

The mobile viewport size is based on the the CSS pixel ratio, for example,My device(Mi A1) has a resolution of 1080x1920 with 2.55 CSS pixel ratio,the viewport on this device is calculated as

( 1080/2.55 ) x ( 1920/2.55 ) = 424 x 753.

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

A pixel ratio of 2.55 means for every 2.55 physical pixels on the device,CSS maps 1 pixel.As today's mobiles have higher resolution on small screens,The media queries in CSS refer to the calculated viewport and not the physical resolution while rendering pages on mobile phones to give a larger view of the page due to small real estate of the mobiles.

然而，笔记本电脑的情况并非如此，因为分辨率越高，它们的空间就越大.我的笔记本电脑的屏幕分辨率为 1366x768 像素，当我检查它的视口大小时，默认缩放比例为 1366x768(全屏查看时).

Whereas, this is not the case with laptops because with higher resolution they come with larger real estate.My laptop has a screen resolution of 1366x768 pixels and when I check it's viewport size that to turns out to be 1366x768 on default zoom (when viewed full-screen).

在这支笔上检查您的

<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>

这篇关于移动视口大小是基于浏览器还是屏幕分辨率?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！