H5移动端知识点总结

闲来无事，想学学H5方面的知识，之前学过基础，现在想认真着手下，网上找了些大牛的总结，我也就搬过来，方便查阅。

一、meta标签

1、控制显示区域各种属性：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
width：viewport的宽度
height：viewport的高度
initial-scale：初始的缩放比例
minimum-scale：允许用户缩放到的最小比例

maximum-scale：允许用户缩放到的最大比例

user-scalable：用户是否可以手动缩放
2、IOS中Safari允许全屏浏览：
<meta content="yes" name="apple-mobile-web-app-capable">
3、IOS中Safari顶端状态条样式：
<meta content="black" name="apple-mobile-web-app-status-bar-style">
4、IOS中Safari设置保存到桌面图标
需要在网站的根目录下存放favicon图标，防止404请求(使用fiddler可以监听到)
<link rel="apple-touch-icon" href="icon.png">
5、忽略将页面中的数字识别为电话号码

一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码

二、取消表单元素在点击态时的边框以及半透明灰色背景

input, textarea, button, a{   -webkit-tap-highlight-color:rgba(0,0,0,0); }

三、移除原生控件样式

input,button,textarea {    -webkit-appearance: none;}

四、使用rem来做响应式开发
针对不同的设备，对页面rem做不同缩放

html {  font-size: $baseFontSize;  @media screen and (min-width: 320px) {    font-size: $baseFontSize*.9;  }  @media screen and (min-width: 360px) {    font-size: $baseFontSize;  }  @media screen and (min-width: 400px) {    font-size: $baseFontSize*1.1;  }}

五、定义字体
如无特殊需求，手机端无需定义中文字体，使用系统默认；
英文字体和数字字体可使用 Helvetica ，三种系统（ios、android、winphone）都支持。

<pre name="code" class="css">body{    font-family: Helvetica;}

六、flex布局兼容性写法
使用 Sass mixin实现flex布局

@mixin display-flex() {  display: -webkit-box;  display: -webkit-flex;  display: flex;}// 参数：数字，默认：1@mixin flex($value: 1) {  -webkit-box-flex: $value;  -webkit-flex: $value;  flex: $value;}// 参数：数字，默认：1@mixin order($value: 1) {  -webkit-box-ordinal-group: $value;  -webkit-order: $value;  order: $value;}// 参数：row, row-reverse, column, column-reverse@mixin flex-direction($direction) {  @if ($direction == row) {    -webkit-box-direction: normal;    -webkit-box-orient: horizontal;    -webkit-flex-direction: row;    flex-direction: row;  } @else if ($direction == row-reverse) {    -webkit-box-pack: end;    -webkit-box-direction: reverse;    -webkit-box-orient: horizontal;    -webkit-flex-direction: row-reverse;    flex-direction: row-reverse;  } @else if ($direction == column) {    -webkit-box-direction: normal;    -webkit-box-orient: vertical;    -webkit-flex-direction: column;    flex-direction: column;  } @else if ($direction == column-reverse) {    -webkit-box-pack: end;    -webkit-box-direction: reverse;    -webkit-box-orient: vertical;    -webkit-flex-direction: column-reverse;    flex-direction: column-reverse;  }}//  参数：flex-start, center, flex-end, space-between@mixin justify-content($value) {  @if ($value == flex-start) {    -webkit-box-pack: start;    -webkit-justify-content: flex-start;    justify-content: flex-start;  } @else if ($value == center) {    -webkit-box-pack: center;    -webkit-justify-content: center;    justify-content: center;  } @else if ($value == flex-end) {    -webkit-box-pack: end;    -webkit-justify-content: flex-end;    justify-content: flex-end;  } @else if ($value == space-between) {    -webkit-box-pack: justify;    -webkit-justify-content: space-between;    justify-content: space-between;  }}//  参数：flex-start, center, flex-end, baseline, stretch@mixin align-items($value) {  @if ($value == flex-start) {    -webkit-box-align: start;    -webkit-align-items: flex-start;    align-items: flex-start;  } @else if ($value == center) {    -webkit-box-align: center;    -webkit-align-items: center;    align-items: center;  } @else if ($value == flex-end) {    -webkit-box-align: end;    -webkit-align-items: flex-end;    align-items: flex-end;  } @else if ($value == baseline) {    -webkit-box-align: baseline;    -webkit-align-items: baseline;    align-items: baseline;  } @else if ($value == stretch) {    -webkit-box-align: stretch;    -webkit-align-items: stretch;    align-items: stretch;  }}

七、移动端touch事件

当用户手指放在移动设备在屏幕上滑动会触发的touch事件
touchstart：当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
touchend：当手指离开屏幕时触发
touchcancel：系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用
八、click产生200-300 ms的延迟响应
页面js捕获click事件的回调函数处理，需要300ms后才生效
解决方案：
1、fastclick可以解决在手机上点击事件的300ms延迟
2、zepto的touch模块，tap事件也是为了解决在click的延迟问题
九、按钮active态
在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态

document.body.addEventListener('touchstart', function () {     //...空函数即可});