大家好，又见面了，我是你们的朋友全栈君。
文章目录
- 前言
- 一、移动端屏幕相关概念
- 1. 屏幕尺寸
- 2. 屏幕分辨率
- 3. 屏幕像素密度（ppi = pixels per inch）
- 二、像素
- 1. 物理像素
- 2. CSS像素
- 3. 设备独立像素
- 4. 位图像素
- 5. 像素比 （dpr）
- 三、视口
- 1. 布局视口
- 2. 视觉视口
- 3. 理想视口
- 三、缩放行为
- 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开发技巧~
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/151992.html原文链接：https://javaforall.cn
