Cod*_*ids 4 css mobile pixel viewport screen-resolution
手机中的视口是基于屏幕分辨率还是手机浏览器？以下是一些流行的移动浏览器视口尺寸：
-Opera Mobile 浏览器视口 850px
-iPhone Safari 浏览器视口 980px
-iPad（横向和纵向模式）视口 980px 移动设备？-Android 浏览器视口 800px
-IE 移动浏览器视口 320px 源。但是视口大小是否按分辨率缩放
移动视口大小基于 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（全屏查看时）。
<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>
从技术上讲，移动设备具有两种视口尺寸：布局视口和视觉视口。
布局视口是固定的，因为它基于物理设备屏幕的宽度和高度。它的维度可以通过JavaScript 中的screen.width和属性来访问，并用于 CSS3 中的媒体查询。screen.heightdevice-width
视觉视口由浏览器窗口的宽度和高度决定。它的维度可以通过JavaScript 中的window.innerWidth和属性来访问，并用于 CSS3 中的媒体查询。window.innerHeightwidth