移动Web深度剖析

时间  2019-11-05
标签 移动 web 深度 剖析 栏目 无线 繁體版
原文   原文链接

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

HTML5与SEO

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

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

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

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

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

可用性的提升，提升用户的友好体验ios

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

说了这么多，扯了这么多，那么上面这些和移动端又有什么关系。实质上是没有关系的，在作移动端开发，因为移动端对于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&quot;/>
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 系统

  1. 默认中文字体是 Heiti SC
  2. 默认英文字体是 Helvetica
  3. 默认数字字体是 HelveticaNeue
  4. 无微软雅黑字体

android 系统

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

winphone 系统

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

以上就是各个系统默认引用的字体包，这里要和设计师说明。可是若是设计师非要坚持使用微软雅黑字体怎么办，难道就没有办法了么？答案是有的，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因而找到了这张图，这张图能够说是把自适应与响应式表现的淋漓尽致。

e1fe9925bc315c60e0ee106c8e63bd1748547714.jpeg?token=acfea84022dc2c991e9af48dbde44ab2&s=FEA83863A5A84D034AD56DD30000A0B1

图片选自网络，侵权必删

响应式

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

我的理解：响应式是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后，若是上层元素消失或者隐藏，目标点会“漂移”到下层元素身上，触发点击事件。

解决方法：

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

写了好多东西，只是我的的一些对于移动端开发的一些总结，可能写的有些乱，很感谢你们可以花费这么长时间来阅读这篇文章。文章中哪里有错误的话，你们能够在下面给我留言，我会尽快作出改正。

若是你和我同样喜欢前端的话，能够加Qq群：135170291，期待你们的加入。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程