移动端特点

手机屏幕常识

逻辑分辨率就是屏幕的宽高，单位是px

设备分辨率 屏幕中一共拥有的物理像素点的个数，相同手机屏幕的设备分辨率越高，手机越清晰

ppI 单位英寸内的物理像素点个数，值越大，手机越清晰

手机屏幕相关参数

掌握动态加载多倍图: srcset

 <!-- 一套代码可以自动识别当前的屏幕的清晰度，自动加载对应清晰度的图片
  srcset -->
  <img  srcset="./images/1.jpg 1x, ./images/2.jpg 2x, ./images/3.png 3x ">

目前前端主流看多倍图解决方式

移动端视口知识

原理

是指手机浏览器内显示的页面区域，一般认为视口的宽度等于html的宽度

分类

1.布局视口（早期使用的，目前不使用）

• 特点1：html标签都是980px
• 特点2：页面上的元素都是被缩放的

2.理想视口（目前移动端常用）

有以下这行代码就是理想视口

• 特点1：理想视口的html标签大小和屏幕一致，手机屏幕越大，根标签html就是多大

• 特点2：页面元素不会被缩放

  理想视口的参数详解

  meta 标签对于网页设置 设置语言 ，设置SEO 关键字

  name 告诉meta标签要设置什么地方 viewport视口

  content 设置视口的哪些内容

  1 width=device-width 视口的宽度等于屏幕的宽度

  2 initial-scale=1.0 设置网页打开的时候，缩放的倍数 1.0没有缩放

  3.maximum-scale 假如 允许缩放，最大缩放的倍数 1.0

  4 maximum-scale 假如 允许缩放，最小缩放的倍数 1.0

  5.user-scalable 控制是否允许用户手指 捏合的手势来缩放网页 ;

  ​ 一般no 不允许，靠不同的厂商的浏览器自动缩放，脱离开发者的控制；

  ​ 真的要缩放了 ，开发者自己写js代码来控制，做到不同的浏览器 同样的手势功能一样

  在工作中用的用法