移动端H5开发基础[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

文章目录

• 前言
• 一、移动端屏幕相关概念
  • 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