对于viewport的理解

 

 

 

刚看到viewport的时候, 各类搜索,各类概念, 看得头大. 各类博客 / 文档看过来,整理下本身心得, 但愿能够帮助须要的童鞋. (本文是本身的理解, 只对于移动端来讲)

好多博客有介绍n种视口,n种像素.准确的概念我也记不住.  我只说下对dpr的理解.

 

dpr = 设备物理像素 / 设备的逻辑分辨率.(不知道dpr的本身百度一下)

 

设备物理像素是多少 : 就是屏幕的分辨率. 好比 :1334*750

设备逻辑分辨率是什么 : 理解这个概念以前先要理解设备独立像素.

设备独立像素(也称密度无关像素,dips) : 是一个定义的固定长度的单位.不一样的设备1dips是同样的. 

逻辑分辨率 就是屏幕的宽高以dips为单位表示. 好比: 667*375 .

 

经过设置元信息:

 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">.

这样,布局视口(layoutviewport)= 设备逻辑分辨率.

这时编程中的1px就等于1dips. 

 

假设当dpr=2时,  那么编程中的1px, 在屏幕中显示就是2px.