移动WEB基础知识

来源：互联网发布：ubuntu麒麟编辑：程序博客网时间：2024/05/02 02:16

Web前端项目实战

移动Web篇

目录 2

µÚ1 基础知识 3

1.1 屏幕 3

1.2 长度单位 4

1.3 像素密度 5

1.4 设备独立像素 6

1.5 像素 8

µÚ2 调试工具 9

2.1 模拟调试 9

2.2 真机调试 10

µÚ3 视口 10

3.1 PC设备 10

3.2 移动设备 11

3.3 移动浏览器 13

µÚ4 屏幕适配 13

4.1 Viewport详解 13

4.2 控制缩放 14

4.3 避免滚动 14

4.4 适配方案 15

1.1.1. 固定宽度 15

1.1.2. 百分比宽度 15

1.1.3. rem单位 16

1.1.4. 100%像素 16

µÚ5 媒体查询 16

5.1 媒体类型 17

5.2 媒体特性 17

5.3 关键字 17

5.4 引入方式 18

5.5 常用特性 18

µÚ6 网页布局 18

6.1 布局方式 18

6.2 响应式布局 19

µÚ7 CSS框架 20

7.1 Bootstrap 20

7.2 Amaze UI 21

基础知识

1. 屏幕

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

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

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

1. 长度单位

在Web开发中可以使用px（像素）、em、pt（点）、in（英寸）、cm（厘米）做为长度单位，我们最常用px（像素）做为长度单位。

我们可以将上述的几种长度单位划分成相对长度单位和绝对长度单位。

如上图所示，iPhone3G/S和iPhone4/S的屏幕尺寸都为3.5英寸（in）但是屏幕分辨率却分别为480*320px、960*480px，由此我们可以得出英寸是一个绝对长度单位，而像素是一个相对长度单位（像素并没有固定的长度）。

1. 像素密度

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

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

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

Retina即视网膜屏幕，苹果注册的命名方式，意指具有较高PPI（大于320）的屏幕。

思考：在屏幕尺寸（英寸）固定时，PPI和像素大小的关系？

结论：当PPI越大，像素的实际大小就会越小，当PPI越小，像素实际大小就越大。

1. 设备独立像素

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

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

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

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

我们也不难发现，如果想要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是有一个对应（比例）关系的，这个对应（比例）关系是操作系统确定并处理，通过window.devicePixelRatio可以获得该比例值。

下图展示了iPhone不同型号间dp和px的比例关系

从上图我们得知dp（或pt）和px并不总是绝对的倍数关系，而是window.devicePixelRatio ~= 物理像素/独立像素，然而这其中的细节我们不必关心，因为操作系统会自动帮我们处理好（保证1dp在不同的设备上看上去大小差不多）。

1. 像素

物理像素指的是屏幕渲染图像的最小单位，不可人为进行改变，其值大小决定了屏幕渲染图像的品质，我们以上所讨论的都指的是物理像素。

//获取屏幕的物理像素尺寸

window.screen.width;

window.screen.height;

//部分移动设备下获取会有错误

见代码示例1-1.html

CSS像素指的是通过CSS进行网页布局时用到的单位，其默认值(PC端)是和物理像素保持一致的（1个单位的CSS像素等于1个单位的物理像素），但是我们可通缩放来改变其大小。

浏览器窗口尺寸是CSS像素来度量的，部分浏览器存在兼容问题（IE低版本无此属性），但是可以忽略这些细节。

//获取浏览器窗口尺寸

window.innerWidth;

window.innerHeight;

//此值大小包含滚动条的大小

见代码示例1-2.html

我们通过调整浏览器的缩放比例可以直观的理解CSS像素与物理像素之前的对应关系，如下图所示：

我们需要理解的是物理像素和CSS像素的一个关系，1个物理像素并不总是等于一个CSS像素，通过调整浏览器缩放比例，可以有以上3种情况。

调试工具
1. 模拟调试

现代主流浏览器均支持移动开发模拟调试，通常按F12可以调起，其使用也比较简单，可以帮我们方便快捷定位问题。

1. 真机调试

模拟调试可以满足大部分的开发调试任务，但是由于移动设备种类繁多，环境也十分复杂，模拟调试容易出现差错，所以真机调试变的非常必要。

有两种方法可以实现真机调试：

1、将做好的网页上传至服务器或者本地搭建服务器，然后移动设备通过网络来访问。

2、借助第三方的调试工具，如weinre、debuggap、ghostlab等

真机调试必须保证移动设备同服务器间的网络是相通的。

视口

视口（viewport）是用来约束你网站中最顶级块元素<html>的，即它决定了<html>的大小。

1. PC设备

在PC设备上viewport的大小取决于浏览器窗口的大小，以CSS像素做为度量单位。

//获取viewport的大小

document.documentElement.clientWidth;

document.documentElement.clientHeight;

//此值并不包含滚动条的大小，这也是与window.innerWidth/Height的差异

见代码示例3-1.html

通过以往CSS的知识，我们都能理解<html>的大小是会影响到我们的网页布局的，而viewport又决定了<html>的大小，所以viewport间接的决定并影响了我们网页的布局。

下面我们通过一个代码实例来演示PC设备viewport（浏览器窗口）是如何影响我们的网页布局的，见代码实例3-2.html

当我们调整浏览器窗口时，4个浮动的盒子换行显示了，原因是父盒子宽度不足以容纳4个子盒子，要解决这个问题可以有两种方法：

1、我们可以给父盒子设置一个固定的宽度，如1280px，见代码实例3-3.html

这样我们可以解决盒子不换行的问题，也可以保证我们的网页内容可以正常的显示，但是出现了滚动条（后面会引用到）。

2、我们可以调整浏览器的缩放比例，这时也可以不换行完整显示网页内容，但是发现网页内容变的非常小。

总结：在PC端，我们通过调整浏览器窗口可以改变viewport的大小，为了保证网页布局不发生错乱，需要给元素设定较大固定宽度（固定网页布局），或者调整缩放比例。

注：PC端viewport不是一个HTML结构，所以我们不能通过CSS来改变它，只是拥有了浏览器窗口的大小而已。

分析完PC端的情况，我们再来看一下移动端会是什么情况呢？

1. 移动设备

我们知道移动设备屏幕普遍都是比较小的，但是大部分的网站又都是为PC设备来设计的，要想让移动设备也可以正常显示网页，移动设备不得不做一些处理，通过上面的例子我们可以知道只要viewport足够大，就能保证原本为PC设备设计的网页也能在移动设备上正常显示，移动设备厂商也的确是这样来处理的。

在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览器会设置一个默认大小的viewport，同时为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸。

如下图为常见默认viewport大小（仅供参考）

从图中统计数我们得知不同的移动厂商分别设置了一个默认的viewport的值，这个值保证大部分网页可以正常在移动设备下浏览。

下面我们通过一个小示例来验证上述结论，执行环境为iPhone5s

在示例中我们设定.box{width: 490px;}了，发现两个盒子正好一行显示，见示例代码3-5.html

设定了.box{width: 491px;}，则换行显示了，见示例代码3-6.html

验证了iPhone5s下viewport的默认宽为980px，这样便可以保证原本为PC设计的网页，在移动端上也不会发生布局的错乱。

我们再做另一个测试，见代码3-7.html

在iPhone5s和部分Android中我们发现页面内容（文字、图片）被缩放了（变的非常小），而在部分安卓设备中则出现了滚动条。

产生缩放和滚动条的原因是什么呢？

要解释上面的原因，需要进一步对移动设备的viewport进行分析，移动设备上有3个viewport，分别是visual viewport、layout viewport和ideal viewport。

1、visual viewport（可视化视口）通俗讲，visual viewport 就是我们视觉上可见的网页区域，以CSS像素做为计量单位，可以通过下面方式获取。

//获取visual viewport

window.innerWidth;

window.innerHeight;

visual viewport对于我们的实际价值并不高，由于他的计量单位是CSS像素，所以值会因缩放比例变化页发生变化。

见示例代码3-8.html

2、layout viewport（布局视口）指的是我们可以进行网页布局区域的大小，同样是以CSS像素做为计量单位，可以通过下面方式获取

//获取layout viewport

document.documentElement.clientWidth;

document.documentElement.clientHeight;

ͨ过ǰ��绍��们֪�#��Ҫ��证为PC设计��页��动设备�ϲ��ֲ�发��错�ң��动设备��Ĭ��设��һ��较��viewport��IOS为980px��这��viewport实际ָ��layout viewport，我们也可改变这个默认值，后面将会介绍。

见示例代码3-9.html

3、ideal viewport（理想视口）设备屏幕区域，以dp（或pt）做为计量单位，不同的设备具有不同大小的理想视口，其大小是不可能被改变的，通过下面方式可以获取。

//获取ideal viewport有两种情形

//新设备

window.screen.width;

window.screen.height;

//老设备

window.screen.width / window.devicePixelRatio;

window.screen.height / window.devicePixelRatio;

并不总是正确的，然而在实际开发我们一般无需获取这个值具体大小。

在理解了上述三个viewport后我们来解释为什么网页会被缩放或出现水平滚动条，其原因在于移动设备浏览器会默认设置一个layout viewport，并且这个值会大于ideal viewport，那么我们也知道ideal viewport就是屏幕区域，layout viewport是我们布局网页的区域，那么最终layout viewport最终是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条了，那么为什么有的移动设备网页内容被缩放了呢？移动设备厂商认为将网页完整显示给用户才最合理，而不该出现滚动条，所以就将layout viewport进行了缩放，使其恰好完整显示在ideal viewport（屏幕）里，其缩放比例为ideal viewport / layout viewport。

1. 移动浏览器

移动端开发主要是针对IOS和Android两个操作系统平台的，除此之外还有Windows Phone。

移动端主要可以分成三大类，系统自带浏览器、应用内置浏览器、第三方浏览器

系统浏览器：指跟随移动设备操作系统一起安装的浏览器。

应用内置浏览器：通常在移动设备上都会安装一些APP例如QQ、微信、微博、淘宝等，这些APP里往往会内置一个浏览器，我们称这个浏览器为应用内置浏览器（也叫WebView），这个内置的浏览器一般功能比较简单，并且客户端开发人员可以更改这个浏览器的某些设置，在我们理实的开发里这个浏览器很重要。

第三方浏览器：指安装在手机的浏览器如FireFox、Chrome、360等等。

在IOS和Android操作系统上自带浏览器、应用内置浏览器都是基础Webkit内核的。

思考：移动端页面要达到什么效果才最合理？

屏幕适配

经过分析我们得到，移动页面最理想的状态是，避免滚动条且不被默认缩放处理，我们可以通过设置<meta name="viewport" content="">来进行控制，并改变浏览器默认的layout viewport的宽度。

1. Viewport详解

viewport 是由苹果公司为了解决移动设备浏览器渲染页面而提出的解决方案，后来被其它移动设备厂商采纳，其使用参数如下：

//通过设置属性content=""实现，中间以逗号分隔

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

width设置layout viewport宽度，其取值可为数值或者device-width。

见代码示例4-1.html

height设置layout viewport高度，其取值可为数值或者device-height

见代码示例4-2.html

initital-scale设置页面的初始缩放值，为一个数字，可以带小数。

见代码示例4-3.html

maximum-scale允许用户的最大缩放值，为一个数字，可以带小数。

见代码示例4-4.html

minimum-scale允许用户的最小缩放值，为一个数字，可以带小数。

见代码示例4-5.html

user-scalable是否允许用户进行缩放，值为"no"或"yes"。

见代码示例4-6.html

注：device-width和device-height实为ideal viewport的宽高。

经过测试（iPhone5s）见代码4-7.html，我们发现一些细节：

initial-scale取值范围0.25 ~ 5

maximum-scale / minimum-scale取值范围0 ~ 10

当同时设置了minimum-scale和initial-scale时，initial-scale将失效

1. 控制缩放

1、设置<meta name="viewport" content="initial-scale=1">��这时我们发现网页没有被浏览器设置缩放。见代码示例4-3.html

2、设置<meta name="viewport" content="width=device-width">��这时我们发现网页也没有被浏览器设设置缩放。见代码示例4-1.html

当我们设置width=device-width��也达到了initial-scale=1的效果，得知其实 initial-scale = ideal viewport / layout viewport。

虽然我们能过设置<meta name="viewport" content="">，可以控制网页的默认缩放，但是会出现滚动条。

两种方式都可以控制缩放，开发中一般同时设置width=device-width和initial-scale=1.0（为了解决一些兼容问题）参见移动前端开发之viewport深入理解，即<meta name="viewport" content="width=device-width, initial-scale=1.0">

1. 避免滚动

我们知道，滚动条是 layout viewport 相对于 ideal viewport 的，所以只要设置 layout viewport 小于或等于 ideal viewport，即<meta name="viewport" content="width=device-width">。

经测试发现我们并没有完全的解决滚动条的问题，原因在于我们示例里的.box {width: 490px;}设置了一个绝对的宽度造成的，要解决这个问题我们可以设置一个百分比（100%）的宽度，见代码示例4-7.html

1. 适配方案

掌握了以上的技术细节后我们可以总结出以下几种适配方案：

1. 1. 固定宽度

1、设置<meta name="viewport" content="width=device-width, initial-scale=1">

2、设置内容区域大小为320px

3、设置内容区域水平居中显示

见代码示例4-11.html

关于手机尺寸（ideal viewport）

更多ideal viewport参考

通过汇总对比我们知道移动设备的屏幕尺寸虽然庞杂，但有几个主要尺寸，分别为320px、360px、480px，这三个尺寸占了绝大部分，并且以320px最多，所以我们移动网页如果设计成320px宽，则可以保证在绝大多数设备里正常显示，此方案已经很少采用了。

1. 1. 百分比宽度

1、设置<meta name="viewport" content="width=device-width, initial-scale=1">

2、设置页面宽度为百分比

见代码示例京东商城

关于百分比

我们需要重新认识CSS里百分比的使用，见代码示例4-12.html

//测试下列属性设置为百分比

width 参照父元素的宽度

height 参照父元素的高度

padding 参照父元素的宽度

border 不支持百分比设置

margin 参照父元素的宽度

我们发现这种方案最容易理解，但是在设置无素大小时有非常大的局限性。

1. 1. rem单位

1、设置<meta name="viewport" content="width=device-width, initial-scale=1">

2.设置页面元素宽度单位为rem或em

注：此方案比较灵活，我们的案例将采用这种方案

关于em和rem

em相对长度单位，其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号大小例如.box {font-size: 16px;}则1em = 16px .box {font-size: 32px;}则1em = 32px，0.5em = 16px

rem相对长度单位，其参照根元素(html)字号大小例如html {font-size: 16px;}则1rem = 16px html {font-size: 32px;}则1rem = 32px，0.5rem = 16px; 注：所有浏览器默认字号都是16px（某些安卓手机可以调置系统字号后，浏览器默认字号会受影响）