移动端基础

1.物理像素

在移动设备上的最小物理显示单元。如,iphone6的物理像素为750*1334。

2.逻辑像素

css中逻辑像素px,可以认为是一个“参考像素”。大小不固定,可以放大和缩小。如PC端上的网页放到手机端浏览时,每个px占的空间缩小,从而整个网页缩小。

2.设备独立像素(dip)

也叫密度无关像素,跟设备的硬件像素无关的,是设备上的一个逻辑单位像素,在iphone6中,一个dip等于4个物理像素。

3.设备像素比(dpr)

是指物理像素与设备独立像素比。如iphone6的物理像素为750*1334,设备独立像素为375*667,设备像素比为2, 相当于一个dip占四个物理像素。

4.像素密度(ppi)

每英寸拥有的物理像素的个数,ppi越高,画面越精密。

5.布局视口与视觉视口

手机上为了容纳为桌面浏览器设计的网站,默认布局视口宽度远大于屏幕宽度,然后缩小布局视口的网页,在视觉视口上显示网站的全貌,视觉视口是物理屏幕上的可视区域。

6.viewport

<meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale=1,user-scalable=no">

device-width表示设备独立像素的宽度。

通过width设置布局视口的宽度,布局视口的宽度=屏幕的设备独立像素的宽度=视觉视口的宽度,此时一个css像素对应一个设备逻辑像素。intial-scale=1,表示初始不缩放网页,缩放为1,maxinum-scale表示最大缩放为1,即页面不能放大,user-scalable=no不允许用户手动缩放页面。

通过上面代码的设置,一个css像素对应一个设备逻辑像素,且布局视口与视觉视口的宽度相同。如iphone6,在375px宽的布局视口上布局网页,在相同宽度的视觉视口显示网页,没有缩放。

原文地址:https://www.cnblogs.com/fe-huahai/p/5610333.html