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等都有许多精美的图标字体；

下面我们利用一套图标来演示一下图标字体的用法：

以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压缩后的文件*/
}

新建一个h1标签，在其before伪类中引入字体，注意：content的内容为unicode编码：

h1::before{
        
        
    font-family: 'flat-ui-pro-icons-regular';
    content: '\e608';
    margin-left: 20px;
}

最终在页面的呈现效果：
值得一提的是，图标字体的颜色可以跟随标签的颜色而改变；若要使用彩色的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：移动端开发入门