本文探讨了移动设备上的网页布局原理，解释了viewport的概念及其重要性。文章详细介绍了devicePixelRatio属性的作用，并讨论了不同viewport（如layoutviewport、visualviewport和idealviewport）之间的区别与联系，帮助开发者更好地理解移动网页的适配机制。
手机浏览器默认做了2件事情：
一、页面渲染在一个980px（ios，安卓可能有640px或1000多不等）的viewport。
二、缩放
为什么渲染时，要有viewport？
为了排版正确（980px的viewport），再进行缩放就能看的正确。
不用980px的排版： font-size为40px等于pc上12px同等物理大小，不规范。
1、window对象有一个devicePixelRatio属性，
它的官方的定义为：设备物理像素和设备独立像素的比例 dpr，也就是 devicePixelRatio（dpr） = 物理像素 / 独立像素。
css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。
2、这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。
3、layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表 浏览器可视区域的大小，ppk把这个viewport叫做 visual viewport。visual viewport的宽度可以通过window.innerWidth 来获取
4、ideal viewport 所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；
第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，
理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。
当然，不只是文字，其他元素像图片什么的也是这个道理。ppk把这个viewport叫做 ideal viewport，
也就是第三个viewport——移动设备的理想viewport。
5、属性scale：缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行100%的缩放，也就是缩放值为1的时候。
6、当前缩放值 = ideal viewport宽度 / visual viewport宽度
scale =2时，1px的长度与2px一样
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
