前端 | 移动Web深度剖析（上篇）
Posted 唐山程序员
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端 | 移动Web深度剖析（上篇）相关的知识，希望对你有一定的参考价值。
随着前端技术的急速发展，随着互联网行业的日益发展，html5作为一种比较新型的开发技术早已经被很多大的企业所应用，通过HTML5语言可以开发适用于任何设备上的酷炫网站页面，所以HTML5的发展趋势可想而知。话说HTML5退出了也好长一段时间了，现在还拿出来炒冷饭O(∩_∩)O哈哈~
为了更好地处理今天的互联网应用，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标签，不禁的让我想起一次面试经历，面试官当时问了我一个问题<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属性主要有以下几种参数:
http-equiv
http-equiv顾名思义，相当于http协议中文件头的作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
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
<div id="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>
下期预告：移动Web深度剖析（下篇），感兴趣的小伙伴千万不要错过啊！
以上是关于前端 | 移动Web深度剖析（上篇）的主要内容，如果未能解决你的问题，请参考以下文章