摘要：一的概念端实际上等于浏览器窗口，拥有浏览器窗口的宽度和高度，元素使用宽度的在未手动设置元素宽度情况下。用获取元素本身的尺寸移动端分为和。大小由设备本身决定。所有的缩放规则都是相对于而言的，而与多宽无关。
一、viewport的概念 PC端
viewport实际上等于浏览器窗口，拥有浏览器窗口的宽度和高度，元素使用viewport宽度的100%（在未手动设置html元素宽度情况下）。用document.documentElement.clientWidth获取viewport的宽度。用document.documentElement.offsetWidth获取元素本身的尺寸
移动端分为visual viewport、layout viewport和ideal viewport。
关于visual viewport和layout viewport两者解释请看两个viewport的故事（第二部分）文章的viewport板块。关于ideal viewport的解释请看Meta viewport (视口元信息标签)。ideal viewport大小由设备本身决定。
CSS布局，尤其是百分比宽度，是以layout viewport做为参照系来计算的。所以元素在初始情况下用的是layout viewport的宽度。
当进行缩放（如果你放大，屏幕上的CSS像素会变少）的时候，visual viewport(就是页面当前显示在屏幕上的部分)的尺寸会发生变化，layout viewport的尺寸仍然跟之前的一样。（如果不这样，你的页面将会像百分比宽度被重新计算一样而经常被重新布局。）
用document.documentElement.clientWidth计算layout viewport的宽度。
用window.innerWidth/Height或者document.documentElement.offsetWidth计算visual viewport的宽度
用document.documentElement.offsetWidth计算 元素的尺寸。
viewport meta标签用来设置layout viewport的宽度。
initial-scale=1visual viewport width = ideal viewport width / zoom factor
设置 initial-scale这条规则实际上做了如下2件事：
1、将页面初始缩放因子设置为给定的值，根据ideal viewport，计算得到visual viewport的宽。
2、设置layout viewport的宽等于刚刚计算出来的visual viewport的宽。
注意:对于IE，会获取一个错误的ideal viewport（320x320而不是320x480），并且会将任意值都当作成1，所以在IE上initial-scale取什么值都无所谓。
initial-scale=1可以将 layout viewport的值设置为 ideal viewport的大小。IE10上横屏模式和竖屏模式的宽都是竖屏时ideal viewport宽度。
width=device-widthwidth规则下有一个特殊的值device-width，通过设置width=device-width可以将layout viewport(布局视口)的宽度等于 ideal viewport(理想视口)的宽。
在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。
initial-scale=1与width=device-width1、使用 width=device-width 和initial-scale=1两个规则，可以将 layout viewport的值设置为 ideal viewport的大小。
2、所有的缩放规则都是相对于 ideal viewport而言的，而与layout viewport多宽无关。因此maximum-scale=3的含义就是页面最多放大到 ideal viewport的3倍。
width 和 initial-scale=1当width 和 initial-scale=1冲突时，使用宽度最大原则(横屏或竖屏模式下均是)来解决，即哪个宽度大用哪个。
三、设备像素与CSS像素之间的换算是如何产生的 每英寸像素(pixel per inch)ppi，表示每英寸所拥有的像素(pixel)数目，数值越高，代表显示屏能够以越高的密度显示图像。ppi的计算方式可以参考维基百科每英寸像素
设备像素比(device pixel ratio)以上计算出ppi是为了得到密度分界，获得默认缩放比例，即设备像素比。
上图可知，ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个高大上的名字——Retina）。
获得设备像素比后，便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。
四、缩放实质现代浏览器中实现缩放的方式无怪乎都是「拉伸」像素。
假设你给一个元素设置了width: 128px的属性，并且你的显示器是1024px宽，当你最大化你的浏览器屏幕，这个元素将会在你的显示器上重复显示8次（大概是这样；我们先忽略那些微妙的地方）。
如果用户进行缩放，那么计算方式将会发生变化。如果用户放大到200%，那么你的那个拥有width: 128px属性的元素在1024px宽的显示器上只会重复显示4次。元素的宽度并没有从128被修改为256像素，元素仍然是128个CSS像素宽，即使它占据了256个设备像素的空间。
参考自：
两个viewport的故事（第一部分）
两个viewport的故事（第二部分）
Meta viewport (视口元信息标签)
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116399.html
摘要：也发现了这个问题，并且适时的出现，它提出了一个方案用来解决这个问题。很明显，的尺寸不会是一个固定的值，甚至每款设备都可能不同。而完美视口也是通过的某种设置来达到。特性通常情况下，有以下种设置。用于指定用户能够放大的比例。 前言 这次想聊聊移动开发相关的事。是的，你没有看错，一句话就可以开始你的移动前端开发。 你心里一定在想，什么话这么酷，能够瞬间带入到移动前端开发的世界。 但其实它一点...
摘要：一的概念端实际上等于浏览器窗口，拥有浏览器窗口的宽度和高度，元素使用宽度的在未手动设置元素宽度情况下。用获取元素本身的尺寸移动端分为和。大小由设备本身决定。所有的缩放规则都是相对于而言的，而与多宽无关。 一、viewport的概念 PC端 viewport实际上等于浏览器窗口，拥有浏览器窗口的宽度和高度，元素使用viewport宽度的100%（在未手动设置html元素宽度情况下）。用d...
摘要：是阿里团队开发的前端适配方案，也是用的的方法。那么第一种方法其实已经能解决前端适配问题了，为什么阿里还要开发一个呢在第一种方法中，时没有任何问题，但是在或者更高的手机屏幕上，因为物理像素的增加，存在小于的显示空间。 话说我刚工作的时候，就开始用rem了，过了没多久，接触到了flexible，系统化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...
摘要：是阿里团队开发的前端适配方案，也是用的的方法。那么第一种方法其实已经能解决前端适配问题了，为什么阿里还要开发一个呢在第一种方法中，时没有任何问题，但是在或者更高的手机屏幕上，因为物理像素的增加，存在小于的显示空间。 话说我刚工作的时候，就开始用rem了，过了没多久，接触到了flexible，系统化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...
阅读 2360·2021-11-25 09:43
阅读 1618·2021-09-22 15:26
阅读 3131·2019-08-30 15:56
阅读 1505·2019-08-30 15:55
阅读 1672·2019-08-30 15:54
阅读 668·2019-08-30 15:52
阅读 2974·2019-08-29 16:23
阅读 763·2019-08-29 12:43
