移动前端中常说的viewport(视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是dip (与设备无关的像素设备逻辑像素)和CSS 像素之间的关系。这里首先了解以下几个概念。
一般移动设备的浏览器都默认设置了一个视口 元标签,定义一个虚拟的布局视口(布局视口),用于解决早期的页面在手机上显示的问题.iOS,Android基本都将这个视口分辨率设置为980px,所以pc上的网页基本能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。
visual viewport(视觉视口)物理屏幕的可视区域,屏幕显示器的物理像素,同样尺寸的屏幕,像素密度大的设备,硬件像素会更多。例如iPhone的物理像素:
理想视口(理想视口)通常是我们说的屏幕分辨率。
dip(设备逻辑像素)跟设备的硬件像素无关的。一个dip在任意像素密度的设备屏幕上都占据相同的空间。
比如MacBook Pro的Retina(视网膜)屏显示器硬件像素是:2880 * 1800。当你设置屏幕分辨率为1920 * 1200的时候,理想视口(理想视口)的宽度值是1920像素,那么dip的宽度值就是1920. 设备像素比是1.5(2880/1920)。设备的逻辑像素宽度和物理像素宽度(像素分辨率)的关系满足如下公式:
逻辑像素宽度*倍率 =物理像素宽度
和移动端手机屏幕通常不可以设置分辨率,一般都是设备厂家默认设置的固定值,换句话说dip的值就是理想的视口(理想视口)(也就是分辨率)的值,比如,iPhone的屏幕分辨率:
CSS像素(px)用于页面布局的单位。样式的像素尺寸(例如宽度:100px)是以CSS像素为单位指定的.CSS像素与dip 的比例即为网页的缩放比例,如果网页没有缩放,那么一个CSS像素就对应一个dip(设备逻辑像素)。
首先看一下视窗元标签极其属性:
1 html 代码:
2
这里是每个属性的详细介绍:
属性名 | 取值 | 描述 |
---|---|---|
宽度 | 正整数或设备宽度 | 定义视口的宽度,单位为像素 |
高度 | 正整数或设备高度 | 定义视口的高度,单位为像素,一般不用 |
初始规模 | [0.0-10.0] | 定义初始缩放值 |
最小规模 | [0.0-10.0] | 定义缩小最小比例,它必须小于或等于最大规模的设置 |
最大规模 | [0.0-10.0] | 定义放大最大比例,它必须大于或等于最小量程设置 |
用户可升级 | 是/否 | 定义是否允许用户手动缩放页面,默认值是 |
(1)宽度
width属性被用来控制布局视口(布局视口)的宽度,布局视口(布局视口)宽度默认值是设备厂家指定的.iOS,Android基本都将这个视口分辨率设置为980px。我们可以 宽度= 320这样设为确切的像素数,也可以设为device-width这一特殊值,一般为了自适应布局,普遍的做法是将width设置为device-width,例如:
1 html 代码:
2
width = device-width也就是将layout viewport(布局视口)的宽度设置理想视口(理想视口)的宽度。网页缩放比例为100%时,一个CSS像素就对应一个dip(设备逻辑像素),而layout viewport(布局视口)的宽度,理想视口(理想视口)的宽度(通常说的分辨率),dip的宽度值是相等的。
(2)高度
与宽度类似,但实际上却不常用。
(3)初始规模
初始规模用于指定页面的初始缩放比例:
1 html 代码:
2
initial-scale = 1表示将layout viewport(布局视口)的宽度设置为理想视口(理想视口)的宽度,initial-scale = 1.5表示将layout viewport(布局视口)的宽度设置为理想视口(理想视口)的宽度的1.5倍。
(4)最大尺度
最大规模的用于指定用户能够放大产品的最大比例,例如
1 html 代码:
2
假设页面的默认缩放值初始规模是1,那么用户最终能够将页面放大到这个初始页面大小的3倍。
(5)最小规模
类似最大尺度的描述,不过最小规模的英文用来指定页面缩小比例的。通常情况下,不会定义该属性的值,页面太小将难以阅读。
(6)用户可扩展
user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为 yes,可被缩放,你也可以将该值设置为 no,表示不允许用户缩放网页。例如:
1 html 代码:
2
1,px(pixels):物理像素,硬件像素,设备像素
2,dp,dip(deveice independent pixels):逻辑像素,设备无关像素,CSS像素
3,pt(点):1/72英寸
4,dpr(devicePixelRatio):设备像素缩放比,即1dp的长度相当于几个px的长度
5,ppi,dpi:像素密度(像素每英寸),斜向一英寸里的物理像素数量
6,em:相对于父元素的font-size的相对单位。
7,rem:相对于根元素的font-size的相对单位。
8,大众:1% 布局视口宽度
9,vh:1% 布局视口高度
10,分辨率:横向物理像素数 * 纵向物理像素数
的iPhone5为例
物理像素:640 * 1136.屏幕尺寸:4英寸。对角线物理像素数:开根号(1136 * 1136 + 604 * 640)= 1304.ppi = 1304/4 = 326.默认dpr:2。逻辑像素:568 * 320
PPI与默认DPR对应关系:(规律:每英寸里面的点越多,让越多的点来充当一个像素)
ppi默认dpr
ldpi 120 0.75
mdpi 160 1.0
hdpi 240 1.5
xhdpi 320 2.0
Retina屏(视网膜屏):ppi大于320
尺寸设备列表https://material.io/devices/
布局宽度:视布局口的逻辑像素的数量
屏幕宽度:屏幕的逻辑像素的数量(视觉视口,可见视口,虚拟视口)
逻辑宽度:逻辑像素的数量
视觉宽度:横向长度
chrome实验结论:桌面浏览器设置viewport无效,但可以手动缩放。移动浏览器设置viewport有效,但也能手动缩放。
桌面浏览器以屏幕宽度进行布局,手动缩放,相当于改变dpr,以缩小为例:
1,缩小后,dpr变小,viewport的视觉宽度不变,逻辑宽度变大
2,缩小后,百分比宽度的元素,百分比仍然生效,逻辑宽度和视觉宽度跟着父元素变化。默认情况下,是视口的100%,因此的视觉宽度不变,逻辑宽度变大。
3,缩小后,固定宽度的元素,逻辑宽度不变,视觉宽度缩小。
4,文字无法无限缩小,缩小到一定程度后继续缩小,视觉宽度不变,dpr变小,逻辑宽度变大。
总结:缩小,dpr变小 ;元素逻辑宽度不变,视觉宽度变小 ;视觉宽度不能变小的(viewport,百分比宽度的元素,小字),视觉宽度不变,逻辑宽度变大。
移动浏览器视口设置初始规模缩放。以缩小为例
1,viewport的逻辑宽度和视觉宽度初始都为宽度,逻辑宽度不变,视觉宽度以initial-scale缩小;视觉宽度缩小到跟屏幕一样宽时,不再缩小,变成逻辑宽度变大,视觉宽度不变。
2,百分比宽度的元素,变化规律跟视口一样
3,固定宽度的元素,逻辑宽度不变,视觉宽度缩小。
如图4所示,无法缩小到文字不能再缩小的程度
总结:viewport视觉宽度缩小到屏幕宽度之前,viewport,百分比宽度元素,固定宽度元素,都是逻辑宽度不变,视觉宽度以同等比例缩小。
浏览移动器手动缩放
不分视,百分比宽度元素,固定宽度元素,的英文全都视觉宽度缩放,逻辑宽度不变。
viewport设置
的最小值规模=,最大规模=,用户可扩展=无“>
width:布局宽度,相当一部分手机浏览器默认为980px
deveice-width:屏幕宽度
initial-scale:初始缩放比例
mininum-scale:最小缩放比例
maximum-scale:最大缩放比例
user-scalable:是否允许用户缩放
情况一:未设置
那么布局宽度宽= 980px,初始缩放初始规模为自动(缩放到屏幕大小)
情况二:viewport 只设置width,不设置initial-scale
那么初始规模为自动
情况三:viewport只设置initial-scale = 1,不设置width
那么宽度=设备宽度
情况四:viewport只设置initial-scale!= 1,不设置width
那么Android宽度= 980px,IOS宽度=设备宽度
screen.width 屏幕的逻辑像素的数量
window.innerWidth 浏览器的逻辑像素的数量(包含滚动条占据的宽度)
document.documentElement.clientWidth viewport的逻辑像素的数量
document.documentElement.offsetWidth 根元素的逻辑像素的数量
window.pageX / Y偏移 布局视口相对于可见视口的位移
window.devicePixelRatio 屏幕DPR
orientationchange 屏幕转向事件