H5移动端适配方案

在讨论适配方案之前,先熟悉几个概念:

设备像素/物理像素:设备实际物理像素点,是显示设备中一个最微小的物理部件,每个像素可以根据操作系统设置自己的颜色和亮度。任何设备的物理像素的数量都是固定的。例如(iphone6 750 * 1337) (iphone6plus 1960 * 1080)。注意:设备像素不等于CSS像素

像素密度:屏幕上每英寸可以显示的像素点的数量,单位是PPI

屏幕分辨率:设备屏幕横纵向上的物理像素点数的乘积。

CSS像素:CSS像素是一个抽象的单位,主要使用在浏览器上,用来精确的度量(确定)Web页面上的内容。CSS像素被称为与设备无关的像素(device-independent像素),简称为“DIPs”,单位px

设备独立像素(PD/PID):密度无关像素,表示用几个实际物理像素表示的一个虚拟像素,这个虚拟像素就叫设备独立像素,如(iphone6 375 * 667) (iphone6P 414 * 736) (iphoneX 375 * 812)。实际开发中常可以认为“ 设备独立像素=CSS像素 ”

设备像素比(dpr):设备物理像素与设备独立像素的比例,可以在JS中获取window.devicePixelRatio。现在的智能手机dpr一般都大于1,例如iphone6/7/8的dpr=2

布局视口(layout viewport):网页布局的基准窗口,PC浏览器上,布局视口就等于当前浏览器的窗口大小(不包括 borders 、 margins、滚动条);移动端,布局视口被赋予一个默认值,大部分为 980px。document.documentElement.clientWidth/clientHeight获取布局视口的宽高。通过在页面中添加meta的viewport width值设置布局视口的尺寸,一般为device-width

视觉视口(visual viewport):用户通过屏幕真实看到的区域,默认等于当前浏览器的窗口大小。通过window.innerWidth/innerHeight来获取视觉视口大小

理想视口(ideal viewport):网站页面在移动端展示的理想大小,上面说到的375 * 667指的就是理想视口尺寸。当页面不进行缩放时,视觉视口=理想视口。

移动端适配解决的就是让布局视口和视觉视口无限接近于理想视口

HTML标签的viewport说明:

  • width决定布局视口的宽度,device-width是理想视口的宽度,设置 width=device-wi

你可能感兴趣的:(web,css,html5)