移动端详解

爱睡懒觉
275 阅读15分钟

移动端

1. 布局相关

1.1 自适应布局(Adaptive Layout)

  • 为不同的设备制定不同的方案，通过检测视口分辨率来判断当前访问的设备屏幕大小，从而请求服务层返回不同的页面
  • 不同设备的代码是不一样的
  • 如果屏幕太小会发生内容过于拥挤

1.2 响应式布局(Responsive Layout)

  • 所有设备上的方案都是同一个
  • 自动识别屏幕宽度，页面的内容和排版布局会自动调整变动

2. 屏幕相关

2.1 屏幕大小

指屏幕的对角线长度，单位是英寸(inch)，以iPhone6为例，其屏幕尺寸为4.7英寸 备注：1英寸(inch) = 2.54厘米(cm)

2.2 屏幕分辨率(物理分辨率、设备分辨率)

指屏幕在：横向、纵向上所拥有的物理像素的总数。一般表示用n*m表示

例如：iPhone6的屏幕分辨率为750*1334，指的是屏幕水平有750个像素点，垂直有1334个像素点

注意

    - 屏幕分辨率是一个固定值，屏幕生产出来就确定了，无法修改
    - 屏幕分辨率、显示分辨率是两个概念，系统设置中可以修改的是：显示分辨率
​
    - 显示分辨率是设备当前所用到的物理像素点数，也可以说：屏幕分辨率 >= 显示分辨率。

常见手机分辨率

型号分辨率(物理像素点总和)
IPhone 3G / 3GS320 * 480
IPhone 4 / 4s640 * 960
IPhone 5 / 5s640 * 1136
IPhone 6 / 7 / 8750 * 1334
IPhone 6p / 7p / 8p1242 x 2208
IPhone X1125 * 2436
华为 P301080 * 2340

2.3 屏幕密度(像素密度)

是指屏幕上每英寸里包含的物理像素点个数，单位是PPI(pixels per inch)，其实这里还有还有一个单位dpi，两个值的计算方式一样，只是使用的场景不同。PPI主要用来衡量屏幕，DPI用来衡量打印机等

注意，像素密度密度值得不是每平方英寸中包含得像素点数量，而是屏幕水平或垂直得一条直线上每英寸包括得像素点数量，例如，iPhone6屏幕宽度为2.3英寸，高度为4.1英寸，其屏幕像素密度就等于750/2.3 = 326 或1334/4.1 = 326

3. 像素相关

3.1 物理像素(设备像素)

物理像素是一个长度单位，单位是px，1个物理像素就是屏幕上的一个物理成像点，就是显示设备中一个最微小的物理部件。它由屏幕制造商决定，屏幕生产后无法修改。例如 iPhone 6 的横向上拥有的物理像素为750、纵向上拥有的物理像素为1334 ，我们也可以用：750* 1334表示。

物理像素图示：

3.2 设备独立像素&css像素

3.2.1 css像素

  • 又称： 逻辑像素，css像素是一个抽象的长度单位，单位也是px，它是为 Web 开发者创造的，用来精确的度量Web 页面上的内容大小。我们在编写css、js、less中所使用的都是css像素（可以理解为：“程序员像素”）；

    思考：我代码中所写的1px（css像素），到了屏幕上到底对应几个物理像素呢？是1个css像素就对应1个物理像素(“发光的灯泡”)吗？要探讨这个对应关系，就要学习接下来的新概念：设备独立像素。

  • 一个css像素到底占据多少个物理像素和谁有关？

    • 屏幕的特性和用户的缩放行为

3.2.2 设备独立像素

  • 设备独立像素简称 DIP 或 DP（device-independent pixel），又称：屏幕密度无关像素。

  • 设备独立像素可以简单认为是计算机坐标系统中的一个点。

  • 典型的用途是允许移动设备软件将信息显示和用户交互扩展到不同的屏幕尺寸。允许应用程序以抽象像素为单位进行测量，而底层图形系统将应用程序的抽象像素测量值转换为适合于特定设备的物理像素。

  • 我们来看一个场景：

    程序员写了：width = 2px，height = 2px 的盒子，若1个css像素直接对应1个物理像素，由于iPhone3G/S 与iPhone4屏幕尺寸相同，但iPhone4的屏幕能容纳下更多的物理像素点，所以iPhone4的物理像素点比iPhone3G/S小很多，那么理论上这个盒子在iPhone4屏幕上也就会比iPhone3G/S屏幕上小很多，而事实是iPhone3G/S 和 iPhone4下这个盒子是一样大的！！！，只不过 iPhone4更加细腻、清晰。如何做到的呢？这就要靠设备独立像素。

    对比：iPhone3G/S 与 iPhone4的成像效果：

    设备独立像素的出现，使得即使在【高清屏】下，（例如苹果的Retina屏），也可以让元素有正常的尺寸，让代码不受到设备的影响，它是设备厂商根据屏幕特性设置的，无法更改。

    设备独立像素 与 物理像素关系

    • 普通屏幕下 1 个设备独立像素 对应 1 个物理像素
    • 高清屏幕下 1 个设备独立像素 对应 N 个物理像素

    设备独立像素 与 css像素关系

    • 在无缩放的情况下（标准情况）：1css像素 = 1设备独立像素

3.3 像素比

像素比(dpr)：单一方向设备【物理像素】和【设备独立像素】的比例。dpr = 物理像素 / 设备独立像素

window.devicePixelRatio

几款手机的屏幕像素参数，点击这里查看更多

型号分辨率（物理像素点总和）设备独立像素(dip或dp)像素比(dpr)
IPhone 3GS320 * 480320 * 4801
IPhone 4 / 4s640 * 960320 * 4802
IPhone 5 / 5s640 * 1136320 * 5682
IPhone 6 / 7 / 8750 * 1334375 * 6672
IPhone 6p / 7p / 8p1242 x 2208414 * 7363
IPhone X1125 * 2436375 * 8123
HUAWEI P101080 x 1920360 x 6403

3.4 像素之间的关系

在不考虑缩放的情况下(理想状态下)

普通屏(dpr = 1)：1css像素 = 1设备独立像素 = 1物理像素 ​高清屏(dpr = 2)：1css像素 = 1设备独立像素 = 2物理像素 ​高清屏(dpr = 3)：1css像素 = 1设备独立像素 = 3物理像素

程序员写了一个width为100px的盒子，那么：

1.代表100个css像素。

2.若用户不进行缩放，则对应100个设备独立像素。

3.在dpr为2的设备上，这100个css像素占据了100*2=200个物理像素（横向）。

描述一下你的屏幕：

现在以iPhone6为例，我们描述一下屏幕（横向上）:

  1. 物理像素：750px
  2. 设备独立像素：375px
  3. css像素：375px

3.5 位图像素

位图和矢量图

  • 位图，又称点阵图像或栅格图像，是由n个的像素点组成的。放大后会失真。(常见有：png、jpeg、jpg、gif)

    一般使用：PhotoShop等软件进行编辑

  • 矢量图，又称为面向对象图像或绘图图像，在数学上定义为一系列由线连接的点，放大后不会失真。（常见：svg）

    一般使用：Adobe Illustrator，Sketch等软件进行编辑

位图像素也是一个长度单位，位图像素可以理解为位图中的一个“小格子”，是位图的最小单元。

注意：1个位图像素对应1个物理像素，图片才能得到完美清晰的展示。

具体编码时借助媒体查询：@media screen and (-webkit-min-device-pixel-ratio:x)

4.视口相关

4.1 pc端视口

在pc端，视口的默认宽度和浏览器窗口的宽度一致。在 css 标准文档中，pc端视口也被称为：初始包含块，它是所有 css 百分比宽度推算的根源，在pc端可通过如下几种方式获取宽度：

console.log('最干净的显示区域',document.documentElement.clientWidth);//常用
console.log('最干净的显示区域+滚动条',window.innerWidth);
console.log('最干净的显示区域+滚动条+浏览器边框',window.outerWidth);
console.log('与浏览器无关，当前设备显示分辨率横向的值',screen.width);

4.2 移动端视口

在移动端,浏览器厂商面临着一个比较大的问题,他们如何将数以万计甚至可以说是数以亿计的pc端网页完整的呈现在移动端设备上，并且不会出现横向滚动条呢？那就要引出移动端的三个概念：1.布局视口、2.视觉视口、3. 理想视口

4.2.1 布局视口

早期的时候我们这样做：pc端网页宽度一般都为：960px ~ 1024px 这个范围，就算超出了该范围，960px ~ 1024px这个区域也依然是版心的位置，浏览器厂商针对移动端设备设计了一个容器，先用这个容器去承装pc端的网页，这容器的宽度一般是980px，不同的设备可能有所差异，但相差并不大；随后将这个容器等比例压缩到与手机等宽，这样就可以保证没有滚动条且能完整呈现页面，但是这样做依然有问题：网页内容被压缩的太小，严重影响用户体验。

移动端获取布局视口方式：document.documentElement.clientWidth

注意：布局视口经过压缩后，横向的宽度用css像素表达就不再是375px了，而是980px

4.2.2 视觉视口

视觉视口就是用户可见的区域，它的绝对宽度永远和设备屏幕一样宽，但是这个宽度里所包含的css像素值是变化的，例如：一般手机会将980个css像素放入视觉视口中，而ipad Pro会将1024个css像素放入视觉视口中。

移动端获取视觉视口方式：window.innerWidth，不过在Android2、Opera mini 、UC8 中无法正确获取。（一般不通过代码看视觉视口）

描述一下你的屏幕：

现在以iPhone6为例，我们描述一下屏幕（横向上）:

  1. 物理像素：750px
  2. 设备独立像素：375px
  3. css像素：980px

4.2.3 理想视口

与屏幕（设备独立像素）等宽的布局视口，称之为理想视口，所以也可以说理想视口是一种标准：让布局视口宽度 与 屏幕等宽（设备独立像素），靠meta标签实现。

理想视口的特点：

  • 布局视口和屏幕等宽，以iPhone6为例，符合理想视口标准之后：设备独立像素：375px，布局视口宽度：375px。
  • 用户不需要缩放、滚动就能看到网站的全部内容。
  • 要为移动端设备单独设计一个移动端网站。

设置理想视口的具体方法：

<meta name="viewport" content="width=device-width" />

【总结】：

不写meta标签（不符合理想视口标准）：

  1. 描述屏幕：物理像素：750px 、设备独立像素：375px、css像素：980px。
  2. 优点：元素在不同设备上，呈现效果几乎一样，因都是通过布局容器等比缩放的，例如200宽的盒子：200/980
  3. 缺点：元素太小，页面文字不清楚，用户体验不好。

写meta标签（符合理想视口标准）：

  1. 描述屏幕：物理像素：750px 、设备独立像素：375px、css像素：375px。

  2. 优点：

    1. 页面清晰展现，内容不再小到难以观察，用户体验较好。

    2. 更清晰的像素关系：布局视口 = 视觉视口 = 设备独立像素 = 375px。

    3. 更清晰的dpr，即dpr = 物理像素/设备独立像素 = 物理像素/css像素。

      例如：dpr=2的设备，1 * 1 css像素 = 1 * 1 设备独立像素 = 2 * 2 物理像素

  3. 缺点：同一个元素，在不同屏幕（设备）上，呈现效果不一样，例如375宽的盒子： 375/375 和 375/414 (不是等比显示)

  4. 解决缺点：做适配。

5. 缩放

5.1 PC 端

放大时

  • 视口变小
  • 元素的 css 像素值不变，但一个css像素所占面积变大了。

缩小时

  • 视口变大
  • 元素的 css 像素值不变，但一个css像素所占面积变小了。

5.2 移动端

放大时

  • 布局视口不变
  • 视觉视口变小

缩小时

  • 布局视口不变
  • 视觉视口变大

注意：移动端缩放不会影响页面布局，因为缩放的时候，布局视口视口没有变化，简记：移动端的缩放没有改变布局视口的任何东西！

6. viewport

meta-viewport 标签是苹果公司在 2007 年引进的，用于移动端布局视口的控制。

使用示例：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

viewport 相关选项

  1. width 布局视口的宽度
  2. initial-scale 【系统】初始缩放比例
  3. maximum-scale 允许【用户】缩放的最大比例
  4. minimum-scale 允许【用户】缩放的最小比例
  5. user-scalable 是否允许用户缩放
  6. viewport-fit 设置为cover值可以解决刘海屏的留白问题

6.1 width

width值可以是设备宽度标识 device-width，也可以是具体值，但有些安卓手机是不支持具体值，IOS全系列都支持。

6.2 initial-scale

  1. initial-scale 为页面初始化时的显示比例。
  2. initial-scale = 屏幕宽度(设备独立像素) / 布局视口宽度。
  3. 只写initial-scale = 1.0 也可以实现完美视口，但为了良好的兼容性，width=device-width, initial-scale=1.0一般一起写。

6.3 maximum-scale

  1. 设置允许用户最大缩放比例，苹果浏览器 safari 不认识该属性
  2. maximum-scale = 屏幕宽度(设备独立像素) / 视觉视口宽度值

6.4 minimum-scale

  1. 设置允许用户最小缩放比例。
  2. minimum-scale = 屏幕宽度(设备独立像素) / 视觉视口宽度值

6.5 user-scalable

是否允许用户通过手指缩放页面。苹果浏览器 safari 不认识该属性

6.6 viewport-fit

viewport-fit 可以设置可视视窗的大小，它有三个属性值：

  • Auto：默认值。这个值不影响初始布局视窗，整个 Web 页面是可视的，与Contain表现一致。

  • Contain：最初的布局视窗和视觉布局视窗被设置为最大的矩形（左图）。

  • Cover：初始布局视窗和视觉布局视窗被设置为设备物理屏幕的限定矩形（右图）。

    • cover可以解决『刘海屏』的留白问题

7. 适配

为什么要做适配？ 由于移动端设备的屏幕尺寸大小不一，会出现：同一个元素，在两个不同的手机上显示效果不一样（比例不同）。要想让同一个元素在不同设备上，显示效果一样，就需要适配，无论采用何种适配方式，中心原则永远是： 等比！。

主流的适配方式有三种：

  • viewport 适配
  • rem 适配（主流方式，几乎完美适配）
  • vw适配

7.1 viewport 适配

  • 方法：拿到设计稿之后，设置布局视口宽度为设计稿宽度，然后直接按照设计稿给宽高进行布局即可。

  • 优点：不用复杂的计算，直接使用图稿上标注的px值

  • 缺点：

    • 不能使用完整的meta标签，会导致在某些安卓手机上有兼容性问题。
    • 不希望适配的东西，例如边框，也强制参与了适配
    • 图片会失真

7.2 rem适配

em 和 rem

em 和 rem 都是 css 中的长度单位。而且两个都是相对长度单位，不过两个有点区别

  • em 相对的是父级元素的字体大小
  • rem 相对的是根元素的字体大小

rem适配的原理：编写样式时统一使用rem为单位，在不同设备上动态调整根字体大小

具体方案

方案一

淘宝、百度的移动端页面用的此方案

  1. 设置完美视口
  2. 通过js设置根字体大小 =  *( 当前设备横向独立像素值 100) / 设计稿宽度
  3. 编写样式时，直接以rem为单位，值为：设计值 / 100 
  4. 增加 JS 代码进行实时适配

优势：编写样式时直接挪动小数点即可。

方法二

搜狐、唯品会的移动端页面用的此方案

  1. 设置完美视口
  2. 通过js设置根字体大小 = 当前设备横向独立像素值 / 10 
  3. 编写样式时，直接以rem为单位，值为：设计值 / (设计稿宽度 / 10)
  4. 增加 JS 代码进行实时适配

7.3 vw适配(百分比)

vw和vh是两个相对单位

  • 1vw = 等于布局视口宽度的1%
  • 1vh = 等于布局视口高度的1%

不过vw和vh有一定的兼容性问题：详见：这里

8. 物理像素边框

高清屏幕下 1px 对应更多的物理像素，所以 1 像素边框看起来比较粗，使用媒查询：

@media screen and (-webkit-min-device-pixel-ratio:2){
    #demo{
        border: 0.5px solid black;
    }
}

参考

juejin.cn/post/695904…

developer.aliyun.com/article/103…

juejin.cn/post/706260…

尚硅谷移动端视频

avatar
文章
阅读
粉丝