移动基础之视口标签

分辨率

1792x828像素分辨率

横向有828个点,纵向有1792个点

物理像素

物理像素(physical pixel)

也可称为设备像素(dp :device pixel)

tips: 不同的屏幕物理像素所代表的区域可能大小不同,实际开发不使用物理像素

CSS像素

也称逻辑像素(logical pixel),设备独立像素(dip: device independent pixel)

实际开发使用的像素

image-20210531202225443

在标清屏幕下,一个css像素(1x1)代表一个物理像素,而在高清屏幕下,一个css像素(1x1)代表4个物理像素(2x2)

image-20210531202434242

设备像素比

设备像素比(dpr: device pixel ratio)

dpr = 设备像素 / css像素(缩放比是1的情况下)

tips:

dpr = 2 表示一个css像素用2x2个设备像素来绘制

缩放

改变的是CSS像素的大小

PPi

每英寸的物理像素点

ppi: pixels per inch

dpi: dots per inch

视口viewport

基本概念:通常viewport是指视窗、视口,浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的,pc端的视口是浏览器窗口区域,而在移动端有三个不同的视口概念:布局视口、视觉视口、理想视口

  • 布局视口:在浏览器窗口css的布局区域,布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或其他值,一般都比移动端浏览器可视区域大很多,所以就会出现浏览器出现横向滚动条的情况

    image-20210531222823085

  • 视觉视口:用户通过屏幕看到的页面区域,通过缩放查看显示内容的区域,在移动端缩放不会改变布局视口的宽度,当缩小的时候,屏幕覆盖的css像素变多,视觉视口变大,当放大的时候,屏幕覆盖的css像素变少,视觉视口变小。

    image-20210531222900711

  • 理想视口:一般来讲,这个视口其实不是真是存在的,它对设备来说是一个最理想布局视口尺寸,在用户不进行手动缩放的情况下,可以将页面理想地展示。那么所谓的理想宽度就是浏览器(屏幕)的宽度了。

理想视口的设置方法

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

在meta标签中,除了viewport这个很重要的属性,用来设置视口的一些行为,还有几个与其搭配一起使用的属性

属性 含义 取值
width 定义视口的宽度,单位为像素 正整数或设备宽度device-width
height 定义视口的高度,单位为像素 正整数或device-height
initial-scale 定义初始缩放值 整数或小数
minimum-scale 定义缩小最小比例,它必须小于或等于maximum-scale设置 整数或小数
maximum-scale 定义放大最大比例,它必须大于或等于minimum-scale设置 整数或小数
user-scalable 定义是否允许用户手动缩放页面,默认值yes yes/no

参考链接


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!