移动Web基础

97

移动端基础

好看 - 能看 -- 移动端的布局.

可用、能用 -- 移动端事件

好用--性能优化

什么是Web开发

  • HTML、CSS 和JavaScript

  • 代码在浏览器中运行

什么是移动Web和PCWeb开发

  • HTML、CSS和JavaScript
  • 代码在移动端(手机、平板等)浏览器中运行(移动Web开发)
  • 代码在PC端浏览器中运行(PC Web开发)

移动Web与PC Web开发的关系

  • 基本知识体系没有太大的区别
    • HTML、CSS 和JavaScript
  • 不同的终端设备具有不同的特性
    • 屏幕大小不同
    • 网络环境和设备性能不同
    • 交互方式不同
    • 兼容性不同

相关概念

在学习移动端之前,我们先来学习一些基础的概念和专有名词,这些知识会在以后的面试、工作沟通中经常用到。

屏幕相关

1.屏幕大小

  • 指屏幕的对角线长度,单位是英寸(inch)。1英寸=2.54厘米。
  • 常见尺寸有: 3.5寸、4.7寸、5.0寸、5.5寸、6.0寸等。

备注:1英寸(inch) = 2.54厘米(cm)

2.屏幕分辨率

指屏幕在:横向、纵向上所拥有的物理像素点总数,单位是 px,1px = 1个像素点。

一般表示用 n * m 表示。

例如: iPhone 6 的屏幕分辨率为 750 * 1334

如果把这面这座大楼比作屏幕,窗户个数就是像素个数; 横向窗户数 x 纵向窗户数 就是这座楼的分辨率

image-20211209231334420

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

常见手机分辨率

型号分辨率(物理像素点总和)
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

3.屏幕密度(屏幕像素密度)

是指屏幕上每英寸里包含的物理像素点个数,单位是 ppi (pixels per inch)

屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小。

比如 iphone 3GS 和 iphone4,屏幕尺寸一样,屏幕分辨率相差一倍,屏幕像素密度也相差一倍

01_屏幕分辨率

计算像素密度的公式:

02_像素密度计算

,其实这里还有另一个单位 dpi(dots per inch),两个值的计算方式都一样,只是使用的场景不同。 ppi主要用来衡量屏幕,dpi 用来衡量打印机等。

ppi: pixels per inch,屏幕上每英寸可以显示的像素点的数量,即屏幕像素密度。

dpi: dots per inch,最初用于衡量打印物上每英寸的点数密度,就是打印机可以在一英寸内打多少个点。两个值的计算方式都一样,只是使用的场景不同。当dpi的概念用在计算机屏幕上时,就称之为ppi。ppi和dpi是同一个概念,Android比较喜欢使用dpi,IOS比较喜欢使用ppi。

像素相关

1.物理像素(设备像素Device Pixel)

  • 屏幕中一个微小的发光物理元器件(可简单理解为超级微小的灯泡,屏幕能显示的最小粒度
  • 长度单位,单位是px,1个物理像素就是屏幕上的一个物理成像点
  • 它由屏幕制造商决定,设备屏幕生产后无法修改

例如 iPhone 6 的横向上拥有的物理像素为750、纵向上拥有的物理像素为1334 ,我们也可以用:750 * 1334表示。

物理像素图示:

2. css 像素(逻辑像素)

  • css像素是一个抽象的长度单位,单位也是px,它是为 Web 开发者创造的,用来精确的度量Web 页面上的内容大小。
  • 我们在编写css、js、less中所使用的都是css像素(可以理解为:“程序员像素”);
  • 在一个标准的显示密度下(普通屏),一个CSS像素对应着一个物理像素。

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

3.设备独立像素

  • 简称 DIP 或 DP(device-independent pixel),又称:,也叫与设备无关像素
  • 代表可以通过程序控制使用的虚拟像素。
  • 设备独立像素是一个总体概念,包括了CSS像素,CSS像素就是设备独立像素,或者说,CSS中使用的像素是设备独立像素。

4.关系

  • 因为设备独立像素是包含了CSS像素的大类,通常我们可以直接比较设备独立像素和设备像素之前的区别和联系。
  • 在普通屏幕下 1个设备独立像素 = 1个设备像素 (在100%,未缩放的情况下,如果缩放到200%可以说1个设备独立像素 = 2个设备像素)
  • 在高分屏或视网膜屏幕上,根据 ppi 不同我们可以得到不同的换算关系,一个设备独立像素可能会等于2~3个设备像素

引言: 在没出现【高清屏】的年代,1个css像素对应1个物理像素,但自从【高清屏】问世,二者就不再是1对1的关系了。

苹果公司在2010年推出了一种新的显示标准:在屏幕尺寸不变的前提下,把更多的物理像素点压缩至一块屏幕里,这样分辨率就会更高,显示效果就会更佳细腻。苹果将这种屏幕称为:Retina 屏幕(又名:视网膜屏幕),与此同时推出了配备这种屏幕的划时代数码产品——iPhone4。

一个 width 为 200px 的元素,它占据了 200 个 css 像素,但 200 个 css 像素占据多少个物理像素取决于屏幕的特性(是否是高密度,即像素比)和用户的缩放行为。

在苹果的视网膜屏幕上,视网膜的像素密度是普通屏幕的两倍,这个元素就跨越了400个设备像素,如果用户放大,它将跨越更多的设备像素

我们来看一个场景:

程序员写了: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设备独立像素

5.像素比

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

计算公式:

dpr = 物理像素 / 设备独立像素

JavaScript中获取屏幕的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

6.像素之间的关系

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

​ 普通屏(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

图片高清显示

位图像素

位图和矢量图

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

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

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

    一般使用:Adobe Illustrator,Sketch等软件进行编辑

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

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

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

// 例如
.logo{
    width: 200px;
    height: 200px;
}
@media screen and (-webkit-min-device-pixel-ratio:2){
    .logo{
        content: url('../imgs/logo@2x.png');
    }
}
@media screen and (-webkit-min-device-pixel-ratio:3){
    .logo{
        content: url('../imgs/logo@3x.png');
    }
}

视口相关

  • 视口 (viewport) 是用户网页的可视区域。
  • 在 css 标准文档中,视口也被称为初始包含块,它是所有 css 百分比宽度推算的根源,

pc端视口

  • 在pc端,视口的默认宽度和浏览器窗口的宽度一致。

  • 在pc端可通过如下几种方式获取宽度:

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

移动端视口

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

1. 布局视口

早期的时候我们这样做:pc端网页宽度一般都为:960px ~ 1024px 这个范围,就算超出了该范围,960px ~ 1024px这个区域也依然是版心的位置

浏览器厂商针对移动端设备设计了一个容器,先用这个容器去承装pc端的网页,这容器的宽度一般是**980px,不同的设备可能有所差异,但相差并不大;随后将这个容器等比例压缩**到与手机等宽,这样就可以保证没有滚动条且能完整呈现页面

05.默认layout_viewport大小

所以手机上,为了容纳为桌面浏览器设计的网站,默认的布局视口的宽度远大于屏幕的宽度,导致网页内容被压缩的太小,严重影响用户体验。

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

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

2.视觉视口
  • 视觉视口是指用户通过设备屏幕看到的区域,可以通过缩放来改变视觉视口的大小。
  • 它的绝对宽度永远和设备屏幕一样宽,但是这个宽度里所包含的css像素值是变化的,例如:一般手机会将980个css像素放入视觉视口中,而ipad Pro会将1024个css像素放入视觉视口中。

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

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. 解决缺点:做适配。

缩放

PC 端

放大时

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

缩小时

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

移动端

放大时

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

缩小时

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

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

viewport

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

使用示例:

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

viewport 相关选项

  1. width=正整数或device-width 布局视口的宽度
  2. height=正整数或device-height 布局视口的高度 一般不用
  3. initial-scale=[0.0-10.0] 【系统】初始缩放比例
  4. maximum-scale=[0.0-10.0] 允许【用户】缩放的最大比例
  5. minimum-scale=[0.0-1.0] 允许【用户】缩放的最小比例
  6. user-scalable=yes / no 是否允许用户缩放
  7. viewport-fit= auto/contain/cover 全面屏(刘海屏)设置 设置为cover值可以解决刘海屏的留白问题

1. width

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

2. initial-scale

  1. initial-scale 为页面初始化时的显示比例。

  2. initial-scale = 屏幕宽度(设备独立像素) / 布局视口宽度。

  3. 只写initial-scale = 1.0 也可以实现完美视口,但为了良好的兼容性,width=device-width, initial-scale=1.0一般一起写。

3. maximum-scale

  1. 设置允许用户最大缩放比例,苹果浏览器 safari 不认识该属性

  2. maximum-scale = 屏幕宽度(设备独立像素) / 视觉视口宽度值

4. minimum-scale

  1. 设置允许用户最小缩放比例。

  2. minimum-scale = 屏幕宽度(设备独立像素) / 视觉视口宽度值

5. user-scalable

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

6.viewport-fit

​ 设置为 cover 可以解决『刘海屏』的留白问题

注意

  • viewport 标签只对移动端浏览器有效,对 PC 端浏览器是无效的
  • 即使设置了 user-scalable = no,在 Android Chrome 浏览器中也可以强制启用手动缩放;ios上的Safari浏览器也是无效的

总结

  • 4 个像素 : 设备像素、设备独立像素、CSS像素、位图像素
  • 3 个视口 : 布局视口、可视视口、理想视口
  • 2 个操作 : 放大、缩小
  • 1 个比例 : 设备像素比