HTML5:移动端开发入门

一、前言

常见的移动端开发分为移动版网站和响应式设计。
移动端开发可以让技术人员专注于移动端的页面优化，而无需在意桌面版的兼容，但页面一旦改动内容，维护成本就翻倍了；
响应式设计让开发人员只需维护一份项目，节省开发和维护成本，不过缺点是需要做好移动端和桌面端的兼容，也十分考验页面设计。
两种开发方式孰强孰弱，暂无定论，本博客主要探讨一下移动端开发的技巧。

二、移动端开发技巧

1. Viewport设置

传统桌面端网站的显示窗口往往都是在1024X768的分辨率以上开发的，远远大于移动端的窗口大小。为了使桌面端网页能在移动端正常显示，移动端浏览器推出了一种名为“viewport”的虚拟窗口，在不同的设备中，这一窗口的大小都不同。（windows为1024px，ios为980px）
为了使移动设备能完整显示页面，viewport往往被浏览器加上缩放以自适应宽度，让980px的网页显示在320px的移动设备上。这就是为什么我们有些网页在手机上看起来文字和图片都很小。（此时用JavaScript获取页面宽度时，仍然为980px）
在移动端页面中，我们可以在标签中添加meta标签，对viewport加以设置。
```
<meta name="viewport" content="width=device-width,initial-scale=1.0"></meta>
```
上面这段代码做了两件关键的事情：
1. 设置viewport的宽度为设备的宽度；
2. 设置scale=1.0，即窗口默认不缩放；
如果你不希望用户缩放你的页面，可以像下面这样做：
```
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maxminscale=1.0"></meta>
```
即锁定页面缩放为1.0，组织用户进行缩放行为。

2. 百分比布局

百分比布局比传统像素布局的优势在于，当用户进行缩放时，页面布局不会因为宽度改变而混乱。
当用户缩放过大时，可能造成图片或文字部分被遮挡的情况，可以通过以下方法来解决：
1. 对于图片，为其设置padding；
2. 对于文字，可用vw来替代px。vw代表文字对viewport的宽度，vh代表高度，在vw体系中，viewport的宽度设置为100vw，依次来换算相对于的文字大小。

3. 弹性布局：Flex

传统的网页充斥了大量的float，对浏览器渲染性能具有很大压力。对此，有一种更加灵活的弹性盒子模型——Flex布局。
关于弹性布局的相关知识，请跳转MDN网站进行学习，这里不再赘述：

4. Media Query

移动端的分辨率五花八门，高分辨率图片在低分辨率的手机里渲染压力大，低分辨率图片在高分辨率手机里又十分模糊，两种情况都非常糟糕。
对此，CSS3提供了一种名叫Media Query的显示规则。
```
    <link rel="stylesheet" href="./css/index.css" media="screen and (max-width: 600px)">
```
上面的代码中，使用link标签引入外部css文件，同时增添了media属性。下面对内容进行解释：
1. screen代表媒体的类型为电脑或者移动终端显示屏幕（可用值：all,print,tv等）；
2. and表示“与”的关系；
3. (max-width: 600px)表示媒体的特性，需要放置在圆括号中，代表媒体最大的宽度就是660px；
4. 所以整个media的含义是：当屏幕宽度小于等于600px时，该css文件适用。
下面进行举例：
1. screen and (min-width: 400px)：当屏幕宽度大于等于400px时，应用该css文件；
2. screen and (min-width: 400px) and (max-width: 600px):当屏幕宽度大于400px小于600px时，应用该css文件；
3. all and (max-device-width: 480px)：当设备宽度小于等于480px时，应用该css文件；
4. all and (max-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)：当所有媒体设备宽度介于481px与1024px之间时，应用该css文件。当portrait改为landscape时，则表示匹配横屏的媒体。

有了media query，我们就可以针对不同屏幕分辨率的设备分别制作相应的css文件：

    <!-- 针对所有设备的基础样式 --><link rel="stylesheet" href="./css/base.css"><!-- <=480的手机可用 --><link rel="stylesheet" href="./css/css480.css" media="all and (max-device-width: 480px)"><!-- 480<px<1024的手机可用 --><link rel="stylesheet" href="./css/css481_1024.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px)"><!-- >=1024的手机可用 --><link rel="stylesheet" href="./css/css1024+.css" media="all and (min device-width: 1024px)">

当然，我们也可以在css文件中指定对应的限制：
```
@media all and (max-device-width: 480px){h1 {font-size : 24px;}
}
```
需要注意的是，对应规则的css代码必须放在media的括号中。

5. spite图

在桌面端中，文件的并行下载早就受到了关注，在移动端更加引起重视，在移动设备中，并行下载的文件数量十分有限，一般在4~5个。文件多了会影响页面的加载速度。
为了解决图片数量下载的问题，雪碧图是一个很好的选择。

下面举个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><title>Document</title><style>*{padding: 0;margin: 0;}ul{list-style: none;}li{width: 250px;float: left;position: relative;font-size: 32px;color: #565656;border-bottom: 1px solid #ccc;line-height: 170px;text-indent: 180px;}li::before{content: "";width: 170px;height: 170px;background: url(./image/color.jpg) no-repeat;position: absolute;left: 10px;}li:nth-child(1)::before{background-position: 0 0px;}li:nth-child(2)::before{background-position: 0 -170px;}li:nth-child(3)::before{background-position: 0 -350px;}li:nth-child(4)::before{background-position: -170px 0px;}li:nth-child(5)::before{background-position: -170px -180px;}li:nth-child(6)::before{background-position: -170px -350px;}li:nth-child(7)::before{background-position: -340px 0;}li:nth-child(8)::before{background-position: -340px -190px;}li:nth-child(9)::before{background-position: -340px -340px;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>
</body>
</html>

显示结果：

利用spite图，可以减少并行图片的下载，加快渲染速度。

6. 图标字体

图标字体是取代图片，用来展现特殊图标和特殊字体的一种重要手段，其普及的速度十分之快，一些著名的网站如：阿里巴巴矢量图标库、fontawesome等都有许多精美的图标字体；
下面我们利用一套图标来演示一下图标字体的用法：
1. 以FlatUI为例，先从官网上下载相关字体文件，引入页面：
```
 @font-face{font-family: 'flat-ui-pro-icons-regular';/*三选一*/src: url('./font/glyphicons/flat-ui-pro-icons-regular.ttf'),    /*常见的矢量字体封装格式*/url("./font/glyphicons/flat-ui-pro-icons-regular.eot"),     /*SFNT子集化后压缩*/url('./font/glyphicons/flat-ui-pro-icons-regular.woff');    /*SFNT压缩后的文件*/
}
```
2. 新建一个h1标签，在其before伪类中引入字体，注意：content的内容为unicode编码：
```
h1::before{font-family: 'flat-ui-pro-icons-regular';content: '\e608';margin-left: 20px;
}
```
3. 最终在页面的呈现效果：
4. 值得一提的是，图标字体的颜色可以跟随标签的颜色而改变；若要使用彩色的icon时，单色的图标字体时无法实现的，需要用svg或者图片来实现。

7. 移动端的交互

在移动设备上，人们的交互方式由鼠标键盘转变为触摸，因此，一遍的交互事件也需要换成适合移动端的事件；
传统的click事件在移动设备上会有大约1s的延迟，因为手机浏览器需要判断用户时长按还是点击；

要使移动端的体验更为流畅，可将点击事件换为touch事件：

let btn = document.getElementById('btn');
btn.addEventListener('touchstart',function(ev){console.log(ev.touches.length)
})
document.body.addEventListener('touchmove',function(ev){console.log(ev.target)
})

touch中共有touchstart、touchmove和touchend三个事件；

**touchstart：**触摸开始的时候触发

**touchmove：**手指在屏幕上滑动的时候触发

**touchend：**触摸结束的时候触发
并且每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches：当前位于屏幕上的所有手指的列表；

targetTouches：位于当前DOM元素上的手指列表；

changedTouches: 涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息（常用）：

dentifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）

target：DOM元素，是动作所针对的目标。

pageX/pageY/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。

除了touch事件外，ios还提供了gesture事件，即多指操作。当有两根以上的手指触摸屏幕时，就会触发该事件：

document.body.addEventListener('gesturechange',function(ev){console.log("手指旋转角度为：" + ev.rotation);console.log("手指旋缩放为：" + ev.scale);
})

gesture 事件如下：

gesturestart：当一个手指已经按在屏幕上，另一个手指又触摸屏幕的时候触发。类似于touchstart的作用一样；
gesturechange：当触摸屏幕的任何一个手指的位置发生变化的时候触发。

gestureend：当任何一个手指从屏幕上面移开时触发。

8. 一些小细节

获取用户客户端信息：
```
console.log(navigator.userAgent);
```
获取到客户端信息后，可利用正则表达式进行判断，并推送不同规则的css样式或者页面跳转。详情请见这篇文章：

获取用户的网络环境：

console.log(navigator.connection.type);

获取用户屏幕状态：

console.log(window.orientation || screen.orientation);

设置开启首页（IOS）：

<link rel="apple-touch-startup-image" href="start.png">

设置iTunes链接：

<meta name="apple-itunes-app" content="app-id=123456">

三、移动端开发框架

Zepto——移动端的jQuery。Zepto的使用方式与jQuery几乎一致，并且为移动端开发提供了不少接口。
BootStrap、Foundation、Semantic、Amaze——前端开发框架，提供了一系列组件和样式，方便开发者使用；
Flat UI、BootMetro、Pure、Colors——设计工具包。Flat UI提供了一系列页面的基础元素——图标字体、矢量图形等，注重设计方面的美感，对于设计感不足的开发者十分良好。
D3——可视化工具。如果要在网页中展现大量图表和数据，可视化工具只需简单的代码，就可以完成各种高大上的图表。
Hammer——轻松控制触摸手势。Hammer.js提供了tap、doubletap、pinch（二指拨动）、rotation、swipe、pan（慢速拖动）等手势事件没事的复杂的手势变得简单起来。切具有良好的兼容性，能识别市面上大多是移动设备。

HTML5：移动端开发入门相关推荐

HTML5移动应用开发入门经典中文pdf扫描版
HTML5是关注度ZUI高的前沿Web技术,而移动互联网则是近两年ZUI炙手可热的Web领域.<HTML5移动应用开发入门经典>将这两者巧妙结合起来,详细讲解了如何利用HTML5进行移动应 ...
《HTML5移动应用开发入门经典》—— 2.4　HTML5中的HTML语法变化
本节书摘来异步社区<HTML5移动应用开发入门经典>一书中的第2章,第2.4节,作者:[美]Jennifer Kyrnin,更多章节内容可以访问云栖社区"异步社区"公众 ...
《HTML5移动应用开发入门经典》—— 1.1　了解HTML5的由来
本节书摘来异步社区<HTML5移动应用开发入门经典>一书中的第1章,第1.1节,作者:[美]Jennifer Kyrnin,更多章节内容可以访问云栖社区"异步社区"公众 ...
《HTML5移动应用开发入门经典》—— 1.6　编写移动网站
本节书摘来异步社区<HTML5移动应用开发入门经典>一书中的第1章,第1.6节,作者:[美]Jennifer Kyrnin,更多章节内容可以访问云栖社区"异步社区"公众 ...
Web前端html5+css3前端开发入门学习笔记
文章目录前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
29.html5 移动端开发总结
手机与浏览器浏览器: 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视 ...
html5 移动端开发工具,H5推荐：最好用的五大移动应用开发工具
移动互联网的开放性带给草根创业者许多想象,"有为青年.白手起家.90后创业",成为这个时代最值得骄傲的字眼.打工不易,创业更不易,开发者不仅要面对专业技术.创新思维.市场推广的考验 ...
HTML5移动端开发常见的兼容性总结
安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网 ...
56 Node.js服务端开发入门
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.服务器端基本概念 1.1 网站的组成网站应用程序主要分为两大部分:客户端和服务器端. ...

HTML5：移动端开发入门

HTML5:移动端开发入门

一、前言

二、移动端开发技巧

1. Viewport设置

2. 百分比布局

3. 弹性布局：Flex

4. Media Query

5. spite图

6. 图标字体

7. 移动端的交互

8. 一些小细节

三、移动端开发框架

HTML5：移动端开发入门相关推荐

最新文章

热门文章