文章目录

前言
一、移动端屏幕相关概念
二、像素
三、视口
三、缩放行为
- - 1. 用户缩放
  - 2. 系统
总结

前言

随着移动端H5需求场景越来越多，例如微信公众号中H5页面的开发，APP中内嵌H5页面等，移动端H5开发基础知识和技巧是前端开发工程师必备的技能~

一、移动端屏幕相关概念

1. 屏幕尺寸

手机屏幕对角线的长度，单位：英寸，1英寸=2.54厘米
在这里插入图片描述

2. 屏幕分辨率

横纵向上的像素点（物理像素）数（个数），1px=1个像素点，也称物理像素，例如iphone6的屏幕分辨率为：750*1336

3. 屏幕像素密度（ppi = pixels per inch）

与【屏幕尺寸】和【屏幕分辨率】有关，即每英寸所拥有的像素数量，决定了手机清晰度。

二、像素

1. 物理像素

屏幕分辨率，是呈像的最小单位

2. CSS像素

web开发的最小单位，一个CSS像素在移动设备上最终会转成物理像素去呈像
一个CSS像素占用多少个物理像素，取决于【设备特性】、【用户缩放行为】

3. 设备独立像素

是一个抽象层，是设备对接CSS像素的接口，一旦CSS像素与设备独立像素挂钩（width=device-width），dpr才有意义。
在PC web开发中无意义，无此概念。

4. 位图像素

1个位图像素对应一个设备独立像素，图片才能完美清晰的展现

5. 像素比（dpr）

【单方向】占满屏幕物理像素个数/ 占满屏幕设备独立像素个数 = devicePixelRatio
获取像素比：window.devicePixelRatio
iPhone6 物理像素（分辨率）是750，设备独立像素是375，dpr=2

在这里插入图片描述

三、视口

1. 布局视口

决定网页布局
由于布局宽度大于大部分手机屏幕的宽度，为了将页面显示完全，只能对原来的页面进行缩放，不然就需要左右拖动来浏览。（大部分浏览器默认采用缩放方式）
document.documentElement.clientWidth 布局视口宽度，无兼容性问题

2. 视觉视口

用户正在看到的网页的区域
缩小页面，看到的网站区域将变大，视觉视口也会变大；同理，放大网站，网站区域将缩小，此时视觉视口也会变小。
var visual = window.innerWidth 视觉视口，接近全部支持

3. 理想视口

布局视口和视觉视口一样大
设置如下：

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

三、缩放行为

1. 用户缩放

用户手动放大：1个CSS像素面积变大，区域内CSS像素个数减少，视觉视口尺寸变小
移动端，用户缩放影响视觉视口的尺寸（布局视口影响布局（块换行等），引起重绘等，所以改变的是视觉视口）

2. 系统

参照理想视口进行缩放，改变布局视口和视觉视口
meta: initial-scale=1.0

总结

移动端和PC端比，有很多特有的概念需要理解。理解了这些基础概念，才能掌握移动端H5开发技巧~

移动端H5开发基础