移动端小u 2022.10.20-CSDN博客

本文链接：https://blog.csdn.net/jiandan009/article/details/127419201

# 移动端web开发

### 概述

随着互联网技术的快速发展，加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要。

移动端Web主要指运行在移动端（手机、ipad）的web页面, 因为具备HTML5特性也叫H5页面、Web App等。

【H5页面、微网页、微站、wap站、webAPP】

如:京东商城手机版，淘宝触屏版，苏宁易购手机版

```

相关阅读：

WebApp与Native App的区别？

在高端智能手机系统中有两种应用程序：一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebApp（基于WEB形式的应用程序）

Native App：

1、开发成本非常大一般使用的开发语言为JAVA、C++、Objective-C

2.能调用系统的 api 优点是性能更好，实现的一些非常酷的交互效果,但是发布 app 流程繁琐，而且不跨平台。

3.更新体验较差（每一次发布新的版本，都需要做版本打包，且需要用户手动更新）

Web App：

1、开发成本较低

使用web开发技术就可以轻松的完成web app的开发

2、升级较简单

升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉

3、维护比较轻松

和一般的web一样，维护比较简单

优点是跨平台，修改方便缺点是不能调用原生的 api, 而且用户体验不如原生 app 好

```

### 移动端web开发现状

- 移动端浏览器大多基于webkit内核，对H5+CSS3支持良好

- 手机的屏幕尺寸非常多，不同的移动设备有不同的屏幕尺寸、视口大小

```

设备的屏幕尺寸查询: https://uiiiuiii.com/screen/

```

我们开发的网页，在不同的手机上，若想展示效果一致，必然不是为每一种型号手机都开发一套页面，而是要尽可能的能适配所有

### 视口

了解视口相关概念及理想视口的设置是移动Web开发非常重要环节。

#### 什么是视口？

视口简单来说就是浏览器显示页面内容的区域。

在PC端，正常的视口宽度就是整个浏览器的窗口可视区的宽度，会随着浏览器窗口大小的重置而缩放；

大多数为PC端设计的网站宽度至少为800px,为了不破坏没有针对移动设备优化的PC网页，移动端引入了视觉视口、布局视口、理想视口三个概念

#### 视觉视口

【视觉视口是指用户当前看到区域】即设备宽度

![image-20210515194708439](image-20210515194708439.png)

#### 布局视口

移动设备的浏览器都默认设置了一个viewport元标签，定义了一个虚拟的布局视口，,CSS 布局将会根据它来进行计算，并被它约束。

一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px

所以PC上的网页基本能在手机上呈现，只不过看上去很小，一般默认允许用户通过手动缩放、平移来查看网页。

![image-20210515194809877](image-20210515194809877.png)

不同设备大小也不相同由设备出厂设置决定，下图列出了一些设备上浏览器的默认viewport的宽度。

![image-20210706113724882](image-20210706113724882.png)

布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height

如果要显式设置布局视口，可以使用 HTML 中的 meta 标签进行设置

#### 理想视口

布局视口对用户不友好，【基于理想视口设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，网站的所有内容都可以正常的呈现给用户】

理想视口 viewport设置：

```

content="width=device-width,initial-scale=1.0,user-scalable=no">

```

上面代码将视口的宽度设置为屏幕宽度（设备逻辑像素），默认无缩放，并且也不允许用户缩放。

属性说明:

| width | 正整数或device-width | 定义视口的宽度，单位为像素 |

| ------------- | --------------------- | --------------------------------------------------- |

| height | 正整数或device-height | 定义视口的高度，单位为像素，一般不用 |

| initial-scale | [0.0-10.0] | 定义初始缩放比率 |

| minimum-scale | [0.0-10.0] | 定义最小缩放比例，它必须小于或等于maximum-scale设置 |

| maximum-scale | [0.0-10.0] | 定义最大缩放比例，它必须大于或等于minimum-scale设置 |

| user-scalable | yes （1）/ no（0） | 定义是否允许用户手动缩放页面，默认值 yes |

## 移动端【适配】方案

由于手机屏幕尺寸、分辨率不同，还要要考虑横竖屏问题，为了使得web页面在不同移动设备上【实现尽可能统一或合理的展示效果】，需要在开发过程中使用合理的适配方案。

常见的适配方案如下：

### rem适配

#### rem单位介绍

Rem( font size of the root element) 是一个相对单位，相对于根元素的字号大小进行计算

大多数浏览器的默认字号是16px，因此默认1rem=16px。

#### rem布局原理

在布局过程中只要使用 rem 设置元素的尺寸，在改变 rem 的基准值 html 的字体大小的时候，页面上的元素将等比例缩放实现适配。

例：

```

.box{

width:1rem;

height:1rem;

}

@media screen and (min-width:320px){

html{

font-size:50px;

}

@media screen and (min-width:480px){

html{

font-size:75px;

}

```

由于设备尺寸繁多需要设置密集的断点因此通过js动态计算并设置html的fontsize值是最常用的方式

#### rem适配实现

1）设置页面的viewport

2）以设计稿为基准值，1rem=100px,使用rem单位取代px常规布局。

3）换算不同设备尺寸下1rem的值，即改变不同尺寸下html 的font-size

```

//获取html宽度（设备宽度）

var deviceWidth = document.documentElement.clientWidth;

// 750可以根据实际设计稿的宽度进行修改

if(deviceWidth>750){ //假设设计稿为750

deviceWidth = 750;

}

var fs = (deviceWidth*100)/750;

document.documentElement.style.fontSize = fs + 'px';

</script>

```

以上代码假设基准值为设计稿，设计稿宽度为750px,如果页面宽度低于750px,那么页面中html的font-size也会按照（当前页面宽度/750）的比例变化。这样，页面中所有应用了rem的作尺寸单位的元素都会随着页面变化而等比例缩放，从而达到适配。

### 关键步骤

- 设置viewport

```

```

- 引入计算比例js,计算不同屏幕尺寸下1rem的大小

- 换算比例时的基准值以设计稿为准 device-width/基准值

```

```

- 从设计稿量取px值转换成rem单位进行布局

```

100px* 100px

1rem 1rem

```

注：

```

//最外层的盒子居中处理

.wrap{

max-width:6.4rem; //以设计稿为准

margin:0 auto;

height:500px;

background-color: yellowgreen;

}

```

### vw适配

#### vw单位介绍

vw 即Viewport's width的简写，是css3规范中的视口单位，

- 相对单位

- 相对于视口大小

- 视口宽度 = 100vw ----> 1vw = 视口宽度1%

相对于视口的宽度，视口被均分为100单位的vw。

```

750px = 100vw

7.5px = 1vw

```