H5移动端的 meta 如何设置 ，以及遇到的兼容问题

viewport设置

<meta charset="utf-8">
<!--主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--这个也是iphone私有标签，允许全屏浏览。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有标签，iphone顶端状态条的样式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。-->
<meta content="telephone=no" name="format-detection">
<!--禁止email识别-->
<meta content="email=no" name="format-detection">

 

 

设置特定的样式

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){
/*一些屏幕只有320px-375px显示的一个属性*/
}

input问题

placehoulder会使文本位置偏移

input{
line-height: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法
}

设置type = number 之后pc端会出现 上下箭头（消除箭头）

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

　　

在ios中kepup、keydown 的监听不是很好，只能通过input事件来解决

<input type="text" id="testInput">
<script type="text/javascript">
  document.getElementById('input').addEventListener('input', function(e){
    var value = e.target.value;
  });
</script>

flex布局

有的安卓不会识别flex-wrap:wrap;属性但是ios就支持

.box{
    display: -webkit-box; 
    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

移动端点击300ms延迟

浏览器兴起初期，为了判断用户是双击还是单击，就设置了一个时间段300ms，用户单击后300ms后做事件处理，如果在300ms内连续点击，就判断为双击，做双击处理事件。
所以现在用click绑定事件呢，就会有300ms延迟的问题。
300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。

推荐两个js，一个是fastclick，一个是tap.js