移动端开发总结

喜欢ヅ旅行 2022-05-28 02:18 329阅读 0赞

# 移动端开发与pc端开发不同 #

移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。

通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）如下图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70][]

而分辨率则一般用像素来度量 px，（像素是一个相对长度单位（像素并没有固定的长度））表示屏幕水平和垂直方向的像素数，例如1920\*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成，如下图所示

![20190510154336456.png][]

# #

## 了解一下几个概念，能使你的移动端开发更加顺畅 ##

### 一、像素密度 ###

DPI（Dots Per Inch）是印刷行业中用来表示打印机每英寸可以喷的墨汁点数，计算机显示设备从打印机中借鉴了DPI的概念，由于计算机显示设备中的最小单位不是墨汁点而是像素，所以用PPI（Pixels Per Inch）值来表示屏幕每英寸的像素数量，我们将PPI、DPI都称为像素密度，但PPI应用更广泛，DPI在Android设备比较常见。

如下图所示，利用 *勾股定理* 我们可以计算得出PPI

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 1][]

PPI值的越大说明单位尺寸里所能容纳的像素数量就越多，所能展现画面的品质也就越精细，反之就越粗糙。

## 二、设备独立像素 ##

随着技术发展，设备不断更新，出现了不同PPI的屏幕共存的状态（如iPhone3G/S为163PPI，iPhone4/S为326PPI），像素不再是统一的度量单位，这会造成同样尺寸的图像在不同PPI设备上的显示大小不一样。

如下图，假设你设计了一个163\*163的蓝色方块，在PPI为163的屏幕上，那这个方块看起来正好就是1\*1寸大小，在PPI为326的屏幕上，这个方块看起来就只有0.5\*0.5寸大小了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 2][]

做为用户是不会关心这些细节的，他们只是希望在不同PPI的设备上看到的图像内容差不多大小，所以这时我们需要一个新的单位，这个新的单位能够保证图像内容在不同的PPI设备看上去大小应该差不多，这就是独立像素，在IOS设备上叫PT(Point)，Android设备上叫DIP(Device independent Pixel)或DP。

举例说明就是iPhone 3G（PPI为163）1dp = 1px，iPhone 4（PPI为326）1dp = 2px。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 3][]

我们也不难发现，如果想要iPhone 3G/S和iPhone 4/S图像内容显示一致，可以把iPhone 4/S的尺寸放大一倍（它们是一个2倍(@2x)的关系），即在iPhone3G/S的上尺寸为44\*44px，在iPhone4/S上为88\*88px，我们要想实现这样的结果可以设置44\*44dp，这时在iPhone3G/S上代表44\*44px，在iPhone4/S上代表88\*88px，最终用可以看到的图像差不多大小。

通过上面例子我们不难发现dp同px是有一个对应（比例）关系的，这个对应（比例）关系是操作系统确定并处理，目的是确保不同PPI屏幕所能显示的图像大小是一致的，通过window.devicePixelRatio可以获得该比例值。且 window.devicePixelRatio ~= 物理像素/独立像素

## 1. 移动端屏幕适配方案 ##

### 1）. 媒体查询方式 ###

@media (max-width:320px){
        body{
            background:red;
        }
    }
    @media (min-width:321px) and (max-width:320px){
        body{
            background:orange;
        }
    }
    @media (min-width:376px) and (max-width:425px){
        body{
            background:green;
        }
    }
    @media (min-width:426px) and (max-width:768px){
        body{
            background:blue;
        }
    }
    @media (min-width:769px){
        body{
            background:grey;
        }
    }

优点：根据设备宽度响应式布局  //使用媒体查询做的响应式布局，根据不同屏幕宽度加载不同css.   
缺点：代码量过大，难以维护

# #

## 2）. meta viewport ##

在head标签内部加上这段代码

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。maximum-scale=1.0 和 minimum-scale=1.0 可省略，因为这里我们设置页面的初始缩放值为不缩放，并且禁止用户缩放。那么设置允许用户的最大/小缩放值就都是没有意义的。

width=device-width: 让当前viewport宽度等于设备的宽度
    user-scalable=no: 禁止用户缩放
    initial-scale=1.0: 设置页面的初始缩放值为不缩放
    maximum-scale=1.0: 允许用户的最大缩放值为1.0
    minimum-scale=1.0: 允许用户的最小缩放值为1.0

## 3）. rem ##

> rem是CSS3新增的相对单位,root em,根em

# rem和em的区别？ #

1.  使用rem为元素设定字体大小时，仍然是相对大小，但相对的是Html根元素,避开了很多层级关系
2.  em是相对父级字体大小

## 2. 移动端点击事件 ##

早期移动设备浏览器网页时内容非常小，为了增强用户体验，苹果公司专门为移动设备设计了双击放大的功能，确保用户可以非常方便的放大网页内容，但是当用户单击一个按钮时，移动设备会延时（约300ms）执行，判断用单是否要双击。

## 1）自己封装tap事件 ##

利用触屏事件可以解决这个问题：

1、确定只有一根手指，

2、允许从接触和离开屏幕的距离有轻微抖动，即允许用户 touchstart 和  touchend 距离 < 60

3、用户从接触和离开屏幕的时间不能超过 150ms

# #

## 2）使用 zepto.js ##

zeptojs为我们封装了常的触屏事件

但是以上两种方案都存在 **点透问题**

> 点透问题：点击上层的的 tap 事件，下层的 click 事件也会触发。

如图，

![2019051016034244.png][]

当点击半闭按钮时，如果下面有click事件或链接则会被触发。

并且，有时我们也希望移动版页面在PC端上也可用，但是PC端是不支持touch事件的，这时我们面临的问题是即提升click在移动设备上的响应速度，又不能使用Zepto.js的tap事件，这时fastclick可以解决这个问题。

# #

## 3 终极）使用fastclick.js ##

> fastclick.js 原理:
> 
> 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉

在 vue.js 中的使用

**一.使用npm安装：**

npm install fastclick -S

**二.用法：**

安装完以后，可以在在main.js中全局引入，并绑定到body，全局生效。或者在单页面引入，只针对当前页面生效

//引入
    import FastClick from 'fastclick'
    //初始化FastClick实例。在页面的DOM文档加载完成后
    FastClick.attach(document.body)

# #

## 3. 真机调试 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70]: /images/20220528/3999e7a572264bf7ad5b3c5755c099c9.png
[20190510154336456.png]: /images/20220528/788328e6bf574d9783ae51f3f30eb86b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 1]: /images/20220528/b801feccd33f4ed8b924a6c6e40904bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 2]: /images/20220528/74a91ba8e7374cde825ea0b69ec1c402.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 3]: /images/20220528/d9412d9513864670822d0a4f0361d077.png
[2019051016034244.png]: /images/20220528/04fc545080e44fe587fad66b9d24abaa.png