对于viewport的理解

Posted 2020-09-27

 

 

 

刚看到viewport的时候, 各种搜索,各种概念, 看得头大. 各种博客 / 文档看过来,整理下自己心得, 希望可以帮助需要的童鞋. (本文是自己的理解, 只对于移动端来说)

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

 

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

 

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

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

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

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

 

通过设置元信息:

 <meta name="viewport" content="width=device-width,initscale=1.0">.

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

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

 

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