前端之路（移动web篇）

移动web基础

移动端开发现状

• 移动web开发指的是需要适配移动设备的网页开发

• 移动web开发与pc端web开发没有本质的区别，使用的还是HTML/CSS/JavaScript的技术

• 移动web开发与pc端web开发的区别是什么？

移动端的浏览器与pc端不同

谷歌浏览器 苹果浏览器、 UC浏览器 QQ浏览器 欧朋浏览器 百度手机浏览器  360安全浏览器  搜狗浏览器  猎豹浏览器等
国内的手机浏览器都是根据webkit内核修改过来的，国内没有自主研发的内核，国内的操作系统也是基于Android系统修改的。
​
因此在移动端，css3属性只需要加webkit前缀即可。

移动端设备尺寸不一样(尺寸非常多，碎片化很严重)

Android： 320*480 480*800  540*960 720*1280 1080*1920 2k屏 4k屏
iphpne：  640*960 640*1136 750*1334 1242*2208

移动端开发分类

• 原生app（native app）

• 混合app（Hybrid app）

• web应用（webApp）

原生app（native app）

原生app是基于操作系统的开发，比如安卓，ios，windows phone,他们只能在各自的操作系统上运行。

优点：

1. 可以访问操作系统，获取更多的资源（gps，摄像头，传感器，麦克风等）

2. 速度快，性能高，用户体验好

3. 可以离线使用

缺点：

1. 开发成本高

2. 需要安装和更新，更新与发布需要审核。

Web App

Web应用使用H5C3开发页面，为浏览器设计的基于web的应用，可以在各种智能设备的手机浏览器上运行。不需要安装即可运行。

优点：

1. 支持设备广泛

2. 开发成本低（使用）

3. 可以随时上线与更新，无需审核

缺点：

1. 用户体验极度依赖网速

2. 要求联网

3. 无法获取手机的资源（gps, 传感器等）

混合app（Hybrid App）

Hybrid App是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native App，但只有一个UI WebView，里面访问的是一个Web App。（淘宝、京东、手机百度）

Hybird App说白了就是使用了Native app的壳，里面其实还是HTML5页面。

优点：

1. 开发成本和难度更低，兼容多个平台

2. 也可以访问手机的操作系统资源。

3. 更新维护更方便

缺点：

1. 用户体验相比原生app稍差。

2. 性能依赖于网速

总结：

三种开发各有优缺点，具体用什么需要根据实际情况而定，比如预算，app注重功能还是内容等。

 

屏幕与分辨率

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

屏幕尺寸

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

1英寸 = 2.54厘米

 

屏幕分辨率

分辨率则一般用像素来度量，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成，如下图所示,相同尺寸下分辨率越高，越清晰。

像素：指计算机显示设备中的最小单位，即一个像素点的大小。

像素是相对长度单位，在屏幕分辨率越高的设备，像素点越小，屏幕分辨率越低，像素点越大。

 

像素密度ppi(了解)

PPI（Pixels Per Inch）值来表示屏幕每英寸的像素数

利用 勾股定理 我们可以计算得出PPI

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

结论：当PPI 越大，展示的画质越精细。

 

设备独立像素

随着技术发展，设备不断更新，出现了不同PPI的屏幕共存的状态,给我们开发带来的问题

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

pt
dp
px:   css像素

获取设备的像素比

window.devicePixelRatio  //物理像素与CSS像素的比值

2倍图与3倍图（重要）

以后同学在工作的过程中，从UI那拿到的设计图通常都是640的设计图或者是750的设计图.

把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。

 

设备像素比devicePixelRatio：即像素的压缩比例

结论 ：在移动端为了在高清屏手机上显示得更加细腻，通常会使用更大的图片，比如2倍图或者3倍图。

 

视口viewport（重要）

问题：一个电脑上的网站，在手机端访问，效果是什么样的？
​
​
1. 在手机端，html的大小都是980px，为什么？
这主要是历史原因导致的，因为在移动设备刚流行的时候，网站大多都是pc端的，pc端的页面宽度一般都比较大，
移动设备的宽度比较小，如果pc端页面直接在移动端显示的话，页面就会错乱。
为了解决这个问题，移动端html的大小直接就定死成了980px（因为早起的pc端网站版心就是980px居多）。
​
​
2. 视口
在pc端，html的大小默认是继承了浏览器的宽度，即浏览器多宽，html的大小就是多宽，
但是在移动端，多出来了一个视口的概念（乔布斯&#x