移动Web深度剖析

随着前端技术的急速发展，随着互联网行业的日益发展，html5作为一种比较新型的开发技术早已经被很多大的企业所应用，通过HTML5语言可以开发适用于任何设备上的酷炫网站页面，所以HTML5的发展趋势可想而知。话说HTML5退出了也好长一段时间了，现在还拿出来炒冷饭O(∩_∩)O哈哈~

HTML5与seo

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如：图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者。HTML5推出一个很重要的概念就是语义化标签。这一概念给网页的SEO带来了很大的帮助。

使搜索引擎更加容易抓取和索引

对于一些网站，特别是那些严重依赖于FLASH的网站HTML5是一个大福音。如果你有一个都是FLASH的站点，你就一定会看到切换到HTML5的好处。首先，搜索引擎的蜘蛛将能够抓取你的站点和索引你的内容。所有嵌入到动画中的内容将全部可以被搜索引擎读取。在搜索引擎优化的基本理论中，这一方面将会驱动你的网站获得更多的右击流量。

提供更多的功能，提高用户的友好体验

使用HTML5的另一个好处就是它可以增加更多的功能。对于HTML5的功能性问题，我们从全球几个主流站点对它的青睐就可以看出。社交网络大亨Facebook已经推出他们期待已久的基于HTML5的iPad应用平台，潘多拉也推出他们基于HTML5的音乐播放器的新版本。游戏平台Zynga也在推出了三款新的在移动设备浏览器上运行的基于HTML5的游戏等等。每天都有不断的基于HTML5的网站和HTML5特性的网站被推出。保持站点处于新技术的前沿，也可以很好的提高用户的友好体验。

可用性的提高，提高用户的友好体验

HTML5的推出给前端行业带来了一片新的天空，不单单提供了大量的API，给移动端开发也是一个很大的福音。

说了这么多，扯了这么多，那么上面这些和移动端又有什么关系。实质上是没有关系的，在做移动端开发，由于移动端对于HTML5的支持还是很不错的。推荐大家在做移动端开发的时候，尽量使用HTML5新添加的那些语义化的标签。

HTML5在特别老的手机上会有问题，因为手机是无法识别这些新标签的。所以我们需要使用JavaScript的createElement方法，手动创建标签，以解决兼容问题，不做多余赘述，这不是本文的重点。

meta标签

看到meta标签，不禁的让我想起一次面试经历，面试官当时问了我一个问题<head>里面都有什么？记得当时只是回答了都有哪些标签，然而，面试官想要知道的不只是简简单单的几个标签。meta一个熟悉既陌生的标签。它到底能做什么？

META标签:通常所说的meta标签，是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。

根据百度百科介绍，可以做很多事情的ing，有的时候SEO也是依赖于meta标签。元数据是用来概括描述数据的一些基本数据。也就是描述数据的数据。

SEO

meta标签共有两个属性，分别是http-equiv属性和name属性。meta标签用来描述一个HTML网页文档的属性，但却是文档的最基本的元数据

name

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

meta标签的name属性语法格式是：<meta name="参数" content="具体的参数值" />。

其中name属性主要有以下几种参数:

名称	作用	举例
Keywords(关键字)	keywords用来告诉搜索引擎你网页的关键字	<meta name ="keywords" content="science,human">
description(网站内容描述)	description用来告诉搜索引擎你的网站主要内容	<meta name="description" content="this's Aaron blog!">
author(作者)	标注网页的作者	<meta name="author" content"root,wo_99936@qq.com">
generator(页面生成器)	规定用于生成文档的一个软件包（不用于手写页面）	<meta name="generator" content="FrontPage 4.0">
revised(页面修改信息)	这常用于最后更改的网站	<meta name="revised" content="story,2015/07/22" />
copyright(版权信息)	版权信息	<meta name="copyright" content="All Rights Reserved" />

http-equiv

http-equiv顾名思义，相当于http协议中文件头的作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

名称	作用	举例
content-Type(显示字符集的设定)	设定页面使用的字符集	<meta http-equiv="content-Type" content="text/html; charset=gb2312"/>
Expires(期限)	可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输，这里必须使用GMT的时间格式	<meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">
Pragma(cache模式)	禁止浏览器从本地计算机的缓存中访问页面内容	<meta http-equiv="Pragma" content="no-cache"/>
Refresh(刷新)	自动刷新并指向新页面，其中的2是指停留2秒钟后自动刷新到URL网址	<meta http-equiv="Refresh" content="2; URL=http://www.root.net"/>
Set-Cookie(cookie设定)	设置cookie, 如果网页过期，那么存盘的cookie将被删除	<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT; path=/";/>
Window-target(显示窗口的设定)	强制页面在当前窗口以独立页面显示,用来防止别人在框架里调用自己的页面	<meta http-equiv="Window-target" content="_top"/>

meta标签的一个很重要的功能就是设置关键字，来帮助你的主页被各大搜索引擎登录，提高网站的访问量。在这个功能中，最重要的就是对Keywords和description的设置。因为按照搜索引擎的工作原理,搜索引擎首先派出机器人自动检索页面中的keywords和decription，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。

移动端辅助参数

HTML5推出之后又给meta赋予了新的使命。meta可以辅助对移动段适配提供一些参数，供浏览器使用。

//  标签的 name 是：可视区域窗口
name = "viewport"
//  设置可视区内容的属性
content
//  宽度等于设备的宽度；一般情况下 width 可以接受两种参数(number||device-width)
//  由于 number [任意数值]在某些移动设备的兼容性不好，所以一般都会使用 device-width。
width="device-width"
//  页面初始比例，配合缩放最大最小使用(number)
initial-scale = 1.0  
//  最小缩放比例，一般会和初始比例保持一致
minimum-scale = 1.0
//  最大缩放比例
maximum-scale = 1.0

//  示例
<meta name="viewport"
      content="width=device-width,
               initial-scale=1,
               minimum-scale=1,
               maximum-scale=1,
               user-scalable=no" />

meta除了上述所说的以外还有一些其他辅助功能。

//  去除iphone识别数字为号码
<meta name="format-detection" content="telephone=no">
//  不识别邮箱
<meta name="format-detection" content="email=no">
//  禁止跳转至地图
<meta name="format-detection" content="adress=no">

移动端设备像素比

说到像素比，那么到底什么是像素比呢？像素比是浏览器厂商出产时候对移动设备的设置，把一个像素放大至N个像素去显示，这里的N=像素比。我们对像素比的属性只能获取，不能对其进行设置。

举个栗子：
现在有个div，设置css属性，假设当前设备获取到的像素比为：2

<div id="box"></div>

<style type="text/css">
#box{
    width:100px;
    height:100px;
    background:red;  
}
</style>

那么设备上显示元素的时候，元素中的1px按照2倍像素比显示，即1px按照2px来显示，也就是说元素被放大成200px*200px来显示。

大家知道，一张正常的图片在photoShop中进行放大的时候会失真变的模糊。那么在构建HTML页面的时候，图片会被放大到2倍的像素比来显示，同理也会导致图片会失真，为了避免在图片在不同设备中显示的时候避免图片失真，在切图过程中图片一定要在宽度大于750px的设计图上选择图片。或者根据dpi来修改图标的大小，使用@2x或者@3x倍图。

@mixin bg-image($url) {
    background-image: url($url + "@2x.png");
}

对于图标的处理可以使用字体包的形式来处理。通过font-size来展示icon阿里图标库。对于字体包的应用这里就不做太多赘述了。

移动端常见样式问题

在进行web端开发的时候很多元素都会有一些默认的属性，给开发带来很大的困扰，然而到了移动端这些问题就没了吗？答案是NO，反之移动端带来的问题远远比web端要多很多。

灰色阴影

开发的过程中超链接，按钮在按下的时候，在元素身上会出现灰色的阴影，闪烁一下。然而这样会给用户体验带来不好的影响，对于这个问题到底应该怎么解决？

解决方案：

a,input,button{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

按钮 IOS 下默认样式

在开发的过程中按照设计图给button编写好css样式，在PC端(移动端模拟器)进行测试的时候没有任何异常，但是通过真机测试的时候就会发现自己写的css样式，被IOS的默认样式给干掉了，和自己想的完全不一样。

解决方案：

input[type="button"],
input[type="submit"],
input[type="reset"]{
    appearance: none;
    -webkit-appearance: none;
}

textarea{
    appearance: none;
    -webkit-appearance: none;
}

移动端默认字体

当我们接到一个移动端项目的时候，psd文件到手，发现很多的UI设计师都喜欢使用微软雅黑作为中文字体进行设计，于是就毫不犹豫的在css默认样式内写入font-family:"微软雅黑"，直至上线才发现字体根本就不是微软雅黑字体，有些惊呆了有木有~~~

这里说一下各种不同系统的默认字体：

ios 系统

默认中文字体是 Heiti SC
默认英文字体是 Helvetica
默认数字字体是 HelveticaNeue
无微软雅黑字体

android 系统

默认中文字体是 Droidsansfallback
默认英文和数字字体是 Droid Sans
无微软雅黑字体

winphone 系统

默认中文字体是 Dengxian （方正等线体）
默认英文和数字字体是 Segoe
无微软雅黑字体

以上就是各个系统默认引用的字体包，这里要和设计师说明。但是如果设计师非要坚持使用微软雅黑字体怎么办，难道就没有办法了么？答案是有的，Css3推出了加载本地字体包。但是不到玩不得以不推荐这样做，因为一个中文字体包实在是太大了。可能需要10+M对于整个网页来说可能需要长时间的加载，有些得不偿失了。

@font-face {
    font-family: 'lato';
    src: url(./font/Lato-Light.ttf);
}
@font-face {
    font-family: "webfontSourceHanSansSC";
    src: url(./font/SourceHanSansCN-Light.ttf);
}

文字缩放

在部分手机中横竖屏切换的时候可能会导致字体大小缩放，用户体验很不好，使用如下css来禁止文字缩放问题。

*{
    -webkit-text-size-adjust:100%;
}

滚动回弹

overflow-scrolling属性控制元素在移动设备上是否使用滚动回弹效果。auto使用普通滚动，当手指从触摸屏上移开，滚动会立即停止。touch使用具有回弹效果的滚动，当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。

body{
    -webkit-overflow-scrolling:touch;
}

一定要设置该属性，否则在IOS下会出现局部滚动不流畅的bug

自适应与响应式

很长一段时间对于自适应与响应式很模糊，傻傻分不清楚，都是为了适配移动端，难道两个不是同一个东西么？两者之间到底有什么区别呢？那么如果想要搞明白这个问题，我想先需要了解一下自适应和响应式到底是什么，才能弄明白两者之间的区别。

为了搞清楚这个问题，疯狂Google于是找到了这张图，这张图可以说是把自适应与响应式表现的淋漓尽致。

响应式

响应式网页设计：响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。(百度百科)

个人理解：响应式是web端页面对移动设备的兼容处理。其实现全部依赖于@media(媒体查询)。其作用就是实时的监控设备情况，完成不同的文件操作。@media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新对页面进行渲染。

并不是所有浏览器都能很好的支持@media，以下@media在各个浏览器中支持情况。

浏览器支持

浏览器	版本
Chrome	21.0.0 版本以上
IE	9.0版本以上
Firefox	3.5.0版本以上
Safari	4.0.0版本以上
Opera	9.0.0版本以上

解决方案引入远程cdn地址，对响应式进行兼容性处理。

<script src="//cdn.bootcss.com/html5media/1.1.8/html5media.min.js"></script>

媒体类型

设备类型形形色色，对于不同的设备该如何去选择处理，@media不仅仅针对于移动设备，下面是@media支持的参数。

all ：所有设备
braille ：盲文触觉设备
embossed ：盲文打印机
print ：手持设备
projection ：打印预览
screen ：彩屏设备
speech ："听觉"类似的媒体类型
tty ：不适用像素的设备
tv ：电视设备

@media print {
    #box {background:green;}
}

这样在手持设备上这个div背景颜色就会变成绿色，在其他的设备上则还保持原有的粉色。So Easy有木有。然而并没有这么简单，想要完成响应式的操作还有大量的工作要去做。

设备屏幕的大小形形色色，大小不一应该以什么规格条件来完成适配呢？

适配条件：

PC端大屏 : 大于等于1200px
PC端中等屏 : 大于等于992px
中等屏（平板） : 大于等于768px
小屏（手机） : 小于768px

对于响应式总结起来也就是利用媒体查询的特性，根据不同的屏幕的大小引入不同的css文件，以达到响应式的目的。

下面是我在使用响应式的时候总结的一些经验：

不要使用固定的宽高
根据不同的屏幕引入不同的css文件
多使用一些浮动布局或弹性布局
尽量不要使用定位
图片的处理，使图片液态化
字体大小不要使用px，使用em后者rem（两者区别前面章节有介绍）

自适应

自适应网页设计：自适应网页设计(AdaptiveWebDesign)指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

移动端的适配个说纷纭，如百分比适配，rem适配，vw适配然而这种情况给开发人员带来很头疼的问题，到底应该怎么适配才能响应不同的移动设备。其实，对于WebApp适配的解决方案有很多，在选择上应该如何取舍，今天就这个问题我们来进行简单的阐明。

如下所有示例都是使用同一布局：

<div id="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</div>

百分比 || vw

因为所有的子元素都是的宽度百分比都是按照父级来定的，高度也是如此，如果把子元素宽度设置为100%的，高度不是固定的时候，子元素宽度会铺满整个父元素，里面的内容不统一的时候会出现参差不齐的情况。其中的原理就是，因为媒体查询会实时对当前设备的可视窗口进行检测，4 个div的宽度各占父层25%，就此完成适配。

#box {
    width:100%;
}
#box:after {
    content:'';
    display:block;
    clear:both;
}
#box div {
    width:25%;
    min-height:80px;
    float:left;
    font-size:36px;
    line-height:80px;
    text-align:center;
    color:white;
}
#box div:nth-child(1){
    background:red;
}
#box div:nth-child(2){
    background:blue;
}
#box div:nth-child(3){
    background:green;
}
#box div:nth-child(4){
    background:hotpink;
}

使用vw也是如此，width:100vw=width:100%这个实在是有点无脑操作了，不在这里浪费大家太多时间。

利用viewport适配

其实大多数的Web App在开发的时候，利用百分比布局的比较少，也会带来一些小的问题，这时就出现的利用viewport利用窗口的缩放来进行布局。

我们说过initial-scale(初始比例)，minimum-scale(最小缩放比例)，maximum-scale(最大缩放比例)，其实在移动在设置这个属性的时候，并不是把元素给放大了，而是把屏幕按照设置的比例对应的放大，给用户一种错觉，达到页面的放大缩小目的。那么该如何使用viewport进行适配呢？

改动CSS样式:

#box {
    width:100%;
}
#box:after {
    content:'';
    display:block;
    clear:both;
}
#box div {
    width:80px;
    min-height:80px;
    float:left;
    font-size:36px;
    line-height:80px;
    text-align:center;
    color:white;
}
#box div:nth-child(1){
    background:red;
}
#box div:nth-child(2){
    background:blue;
}
#box div:nth-child(3){
    background:green;
}
#box div:nth-child(4){
    background:hotpink;
}

但是如果这样设置的话就无法适应所有的移动设备了，我们应该怎么去做才能让他完全的适配所有的移动设备呢？利用强大的JavaScript来解决这个问题，还没有JavaScript不能解决的问题。

(function() {
    //获取到的是移动设备的deviceWidth，即设备屏幕宽度
    var _deviceWidth = window.screen.width;     
    // 希望通过 viewport 把所有页面设置成一致
    _targetWidth = 320;    
    //得到初始和最大最小缩放比例
    _scale = (_deviceWidth / _targetWidth);
    //创建一个meta标签
    oMeta = document.createElement('meta');     
    oMeta.name = 'viewport';     //可视区域窗口
    //把缩放比例赋值给初始化缩放比例最大最小缩放比例
    oMeta.content = 'user-scalable=no,initial-scale=' + _scale +
                    ',minimum-scale=' + _scale +
                    ',maximum-scale=' + _scale;
    document.head.appendChild(oMeta);     //把meta标签添加到head里面
})();

通过JavaScript把所有的目标屏幕宽度设置成一样的，计算出当前的屏幕宽度与我们所需要设定的屏幕宽度的比例，达到设备的适配。通过viewport进行适配，会出现先前提到的问题，就是在图片选取上要注意，图片过小会导致图的失真。

有一点需要注意，这种适配方法，在QQ内置浏览器中布局会错乱，出现很大的适配问题，如果不考虑QQ内置浏览器的话可以考虑使用这种方案，但是不太推荐。

利用 rem 适配

然而最常见的适配方法也就是使用rem来进行适配，很多小伙伴可能对于em和rem有些混淆，傻傻的分不清楚。

em：是根据父节点的字体大小进行计算的单位。
rem： r 代表根（HTML），知道r代表HTML后就可以明确的知道rem是通过HTML的字体大小进行计算的单位。

(function() {
    //  获取到HTML
    var oHtml = document.documentElement;   
    //  获取到移动设备的html的外围宽度，如果给HTML设置宽度会印象结果
    _hWidth = oHtml.getBoundingClientRect().width;    
    //  获取到移动设备的视口的宽度，推荐使用
    _Width = oHtml.clientWidth;      
    //  这里的16是拟定值，可以随意设置，最好能与你测试的设备宽度能整除，方便计算
    oHtml.style.fontSize = _Width / 16 + 'px';     
})();

改动css

#box {
    width:100%;
}
#box:after {
    content:''; 
    display:block;
    clear:both;
}
#box div {
    width:4rem;
    height:4rem;
    float:left;
    font-size:36px;
    line-height:4rem;
    text-align:center;
    color:white;
}
#box div:nth-child(1){
    background:red;
}
#box div:nth-child(2){
    background:blue;
}
#box div:nth-child(3){
    background:green;
}
#box div:nth-child(4){
    background:hotpink;
}

既然已经知道两者的区别，那么在实际开发过程中应该如何使用rem完成适配，上面的css代码中，rem又是怎么计算得出来的呢？

公式：元素所需设置的rem值=设计图测量的值/(屏幕的宽度/N)，这里的N就是在JavaScript计算的时候除以的那个16。其原理是把屏幕平均分成了N份，并把一份的值赋值给了rem，也就是html根元素的字体大小。

我也去看了一下如某宝、某东的适配方案，他们同样使用的是rem进行适配的，但是与他们在rem赋值的做了判断，当屏幕大于750px就将屏幕宽度锁死，固定在750px使rem成为一个固定的值。这样当屏幕过大的时候，页面内容不会变的特别大。

(function() {
    //  获取到HTML
    var oHtml = document.documentElement;   
    //  获取到移动设备的html的外围宽度，如果给HTML设置宽度会印象结果
    _hWidth = oHtml.getBoundingClientRect().width;    
    //  获取到移动设备的视口的宽度，推荐使用
    _Width = oHtml.clientWidth;      
    _Width = _Width>=750?750:_Width;
    //  这里的16是拟定值，可以随意设置，最好能与你测试的设备宽度能整除，方便计算
    oHtml.style.fontSize = _Width / 16 + 'px';     
})();

很多大厂都是采用的rem的这种适配方案，大家可以自行Google一下，大厂是如何处理的。理论上是差不多的，可能就是在用法以及对于rem计算的处理有些不同而已。不管如何处理只要懂得这个道理就好了。

移动端事件

随着设备的不同所要应用的事件也就会有所不同，然而在移动的应用onclick的时候是可以兼容的，会存在一些小问题，所以针对移动端，推出了移动端专用的事件，那么今天就具体和大家说一下，移动端的事件的一些问题，以及在解决这些问题的时候引发出的另一些问题。

现在会想起最初做移动端的时候，是使用onclick事件去完成一些操作，虽然移动端能够完成onclick的一些操作，还是会存在一些问题。

Click事件在移动端开发中会有300ms的延迟，因为在移动端早期，浏览器系统有放大缩小功能，用户在屏幕上点击两次以后，系统会触发放大或者缩小的功能，因此系统做了一个处理，当触摸一次后，在300ms以后有没有进行二次触摸，如果存在二次触摸，说明就触发了放大或缩小功能，否则的话只是单单执行click事件。因此当click时候，所有用户必须等300ms后才会触发click事件。所以当在移动端使用click事件的时候，会感觉有300ms的延迟。

移动端主要分为三个比较重要的事件，也是经常用的事件：

touchStart ：手指按下
touchMove ：手指移动
touchEnd ：手指离开

移动端事件对象

移动端的事件对象与web端中的事件对象有些不太一样，web端我们在对页面进行操作的时候大多数都是依赖于鼠标，但是移动端是依赖于屏幕的，通过手指的触摸屏幕，给用户反馈，鼠标只能有一个，但是手机却又很多(●'◡'●)

移动端的事件对象存在于事件函数中：
例子：

var oDiv = document.getElementById('div');
oDiv.addEventListener('touchstart',function(ev){
    console.log(ev)
})

事件对象属性：

属性	说名
touches	当前位于屏幕上的所有手指的一个列表
targetTouches	位于当前dom元素上的一个手指的一个列表
changedTouches	涉及当前事件的手指的一个列表

大家可以通过上面的代码输出一下ev（事件对象），在控制台查看一下移动端都包含哪些东西。

除了上述事件，有个特殊事件再说一下orientationChange这个事件是苹果公司为safari中添加的。以便开发人员能够确定用户何时将设备由横向查看切换为纵向查看模式。在设备旋转的时候，会触发这个事件。

window.addEventListener("orientationchange", () => {
    alert(window.orientation);
}, false);

orientation media query在ios3.2+和安卓2.0+上还有其他浏览器上有效。有些设备并没有提供orientationchange事件，但不触发窗口的resize事件。并且media queries也不支持的情况下，我们该怎么办呢？可以用resize事件来判断。用innerWidth，innerHeight，可以检索得到屏幕大小。依据宽和高的大小比较判断，宽小于高为竖屏，宽大与高就是横屏。就现在的移动端发展而言已经又大多数移动设备已经支持这个事件了。

移动端开发注意事项

在移动端开发的过程中，浏览器的模拟器有时可能会不支持on的方法绑定事件，所以一般要用事件绑定的方式给元素绑定事件。

var oDiv = document.getElementById('div');
oDiv.addEventListener('touchstart',(ev) => {
    console.log(ev)
})

移动端开发有一个很大的坑，层级为了这个坑也是翻山越岭。这个大坑就是事件点透，最初看到这个名词的时候也是一脸的懵逼，不知道怎么回事。

什么是事件点透？当上层元素发生点击的时候，下层元素也有点击特性，在大约300ms后，如果上层元素消失或者隐藏，目标点会“漂移”到下层元素身上，触发点击事件。

解决方法：

下层不要使用有点击（焦点）特性的元素。
阻止document的默认行为

原文来自：https://segmentfault.com/a/1190000019321095

链接: https://www.fly63.com/article/detial/3468