摘要：原本在未缩放的页面上看起来很小的尺寸，现在通过看上去变大了，事实上这部分的的值并没有变化，仅仅是因为进行放大后，的的值所占的屏幕分辨率的值变大了。同理的的值并没有发生变化但是值所占的屏幕分辨率的值变小了。
首先了解几个概念:
物理像素：买手机的时候会有一个 n x m 的分辨率，那是屏幕的n x m个呈像的点，一个点（小方格）为一个物理像素。它是屏幕能显示的最小粒度.
CSS像素：就是CSS里的Px，上面已经讲了是viewport中的一个小方格。
像素密度：即dpi或ppi，屏幕每英寸所占的物理像素点。
像素密度如何去计算请戳我
本文主要是说明layout viewport和visual viewport两者的区别和在移动端上得表现。
当你在写移动端页面的时候，经常会看到这样一个元素信息
其中name属性声明了这个meta标签元素想要声明的内容的名称,content就是声明的具体内容了。
这也是这篇文章想要探讨的一些问题。
不管你是用PC端还是移动端的浏览器去访问一个页面的时候。你所看到的浏览器的窗口就是你visual viewport（通过window.innerWidth/height获取），对于移动端来说，就是你通过浏览器所看到的那部分大小，它的度量单位是px(css中的像素)。这个visual viewport通常是可以变化的，例如你对屏幕进行缩放，这样就可以改变visual viewport的大小，或者你移动屏幕的滚轮，这样就可以改变visual viewport的位置。
和visual viewport相对应的另外一个viewport叫layout viewport。它就相当于一个大的box，所有的内容都要在这个box里面显示。你通过visual viewport所看到的内容就是layout viewport上的部分内容。
visual viewport和layout viewport到底又有什么区别和联系呢?把layout viewport想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架，你通过它来看这张大图。（译者：可以理解为「管中窥豹」）这个小框架的周围被不透明的材料所环绕，这掩盖了你所有的视线，只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是visual viewport。当你保持框架（缩小）来看整个图片的时候，你可以不用管大图，或者你可以靠近一些（放大）只看局部。你也可以改变框架的方向，但是大图（layout viewport）的大小和形状永远不会变。
当你进行页面缩放的时，你可以想象你拿着这个小框架离这张大图越来越近了，那么你所看到的大图的内容也越来越少了。原本在未缩放的页面上看起来很小的尺寸，现在通过viewport看上去变大了，事实上这部分的css的px值并没有变化，仅仅是因为进行放大后，css的1px的值所占的屏幕分辨率的值变大了。
同理，当你缩小整个页面的时候，看到大图的内容也越来越多，同时，原本看起来很大的尺寸，现在再通过viewport看上去的时候又变小了。同理,css的1px的值并没有发生变化,但是1px值所占的屏幕分辨率的值变小了。
在放大和缩小的过程中，visual viewport和layout viewport的宽，高都没发生任何的变化,变化的仅仅就像是用户拿着这个visual viewport去远离或者靠近layout viewport，在远离或者靠近的过程中，就会呈现出缩放的效果来。
那么layout viewport到底有多宽呢？初始状态：
例如chrome下，初始layout viewport的宽度是980px，这个时候整个页面是处于完全缩小的状态下，通过visual viewport是可以看到layout viewport中的所有内容的，就好像你拿着visual viewport，离layout viewport到正好可以看到layout viewport所有内容的距离为止。
即在初始状态下,没有设置的情况下，layout viewport依据不同浏览器的特性，有一个初始值，并处于完全缩小的状态。例如 12306官网
声明了< meta name="viewport">的状态下：
当通过meta标签申明了viewport的宽度
layout viewport初始化的宽度就是300px,并处于完全适应于visual viewport的状态。即通过visual viewport可以看到layout viewport中所有的内容(不存在滚轮的情况下)。
当你拿着手机屏幕进行翻转的时候：
如果visual viewport 的宽度 > layout viewport 的宽度，那么viewport需要zoom in,以适应visual viewport的宽度
如果visual viewport 的宽度 < layout viewport的宽度，那么viewport需要zoom out，以适应visual viewport的宽度
device-width会将手机横向物理像素/转化系统(具体的换算见请戳我)作为其值，并重置相应的layout viewport的值，并适应visual viewport。
此时，不管手机屏幕是否翻转时，visual viewport 都和 layout viewport的值相同。而不会出现缩放的情况。不过用户是可以通过进行缩放操作的。
如果设置
此时用户不能对网页进行缩放。
参考文章：
两个viewport的故事
移动适配(二)
移动适配(一)
深入了解viewport和px
在移动浏览器中使用viewport元标签控制布局
Safari Web Content Guide
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49940.html
摘要：对于，浏览器全屏状态下，其的值为。的大小可以通过和，实际使用中可能会有一些兼容问题，这跟声明有关。是为了能将电脑上的网页正确的显示到手机上。调整的大小，让其在的查看下有最佳效果，就是我们想要的移动端适配。 上一篇博文，可算把像素这个东西讲清楚了。在这篇博文里面，将继续介绍viewport相关的内容。 很多博客都会提到PPK所讲的三个viewport，有的讲的比较复杂，看的云里雾里，我这...
摘要：对于，浏览器全屏状态下，其的值为。的大小可以通过和，实际使用中可能会有一些兼容问题，这跟声明有关。是为了能将电脑上的网页正确的显示到手机上。调整的大小，让其在的查看下有最佳效果，就是我们想要的移动端适配。 上一篇博文，可算把像素这个东西讲清楚了。在这篇博文里面，将继续介绍viewport相关的内容。 很多博客都会提到PPK所讲的三个viewport，有的讲的比较复杂，看的云里雾里，我这...
摘要：影响着其中元素的尺寸和定位。在标准中，元素的称为。当的宽度高度使用百分数的值时，这个百分数的基准就是的尺寸。例子其中就溢出了的区域。造成以上不同的原因是，在桌面端的缩放和在移动端的缩放有不同的性质。这两个数值的单位是设备独立像素。 前言 本篇文章修改、整理自我以前写的一篇文章。 在阅读这篇文章之前，你需要了解设备像素、逻辑像素（设备独立像素）和CSS像素的区别，见我的前一篇文章理解设备...
摘要：当你进行页面放大的时候，原本在未缩放的页面上看起来很小的尺寸，现在通过看上去变大了，事实上这部分的的值并没有变化，仅仅是因为进行放大后，的的值所占的屏幕分辨率的值变大了。同理的的值并没有发生变化但是值所占的屏幕分辨率的值变小了。 前言 通过上一篇我们已经大概明白viewport是什么，但是viewport并没有那么简单，一包研究得身心疲惫，脑子一个不够用哈哈，让我们一起看看吧！ 三个v...
摘要：首先屏幕是由一个一个显示单元组成的每一个显示单元都是物理世界真实存在的把一个显示单元的大小称为一个物理像素通常我们所说的分辨率就是指一块屏幕显示单元的个数比如叉表示这块屏幕由叉个显示单元组成其次通常情况下个显示单元对应计算机系统中的也就是说 首先 屏幕是由一个一个显示单元组成的.1 每一个显示单元都是物理世界真实存在的;2 把一个显示单元的大小称为一个物理像素;3 通常我们所说的 分辨...
阅读 1968·2021-11-19 11:37
阅读 528·2021-11-11 16:54
阅读 1100·2021-11-02 14:44
阅读 2918·2021-09-02 15:40
阅读 2302·2019-08-30 15:44
阅读 890·2019-08-29 11:17
阅读 1019·2019-08-26 14:06
阅读 1496·2019-08-26 13:47
