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 () { 
    //...空函数即可
});