移动Web深度剖析

栏目: Html5 · 发布时间: 5年前

内容简介：随着前端技术的急速发展，随着互联网行业的日益发展，为了更好地处理今天的互联网应用，对于一些网站，特别是那些严重依赖于FLASH的网站HTML5是一个大福音。如果你有一个都是FLASH的站点，你就一定会看到切换到HTML5的好处。首先，搜索引擎的蜘蛛将能够抓取你的站点和索引你的内容。所有嵌入到动画中的内容将全部可以被搜索引擎读取。在搜索引擎优化的基本理论中，这一方面将会驱动你的网站获得更多的右击流量。

随着前端技术的急速发展，随着互联网行业的日益发展， 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&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 于是找到了这张图，这张图可以说是把自适应与响应式表现的淋漓尽致。

移动Web深度剖析

图片选自网络，侵权必删

响应式

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

个人理解：响应式是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，期待大家的加入。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
顺势而为--雷军传

顺势而为--雷军传

采文 / 哈尔滨出版社 / 2014-9 / 29.80

主要介绍了雷军上大学开始创业到加入金山再到成为天使投资人一直最后创立小米公司的过程，以及他的“站在风口的猪”等个人名言思想的涉及。一起来看看 《顺势而为--雷军传》 这本书的介绍吧!

码农工具
JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

html转js在线工具
html转js在线工具

html转js在线工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3