html iOS端去除Input的边框样式和阴影

屏蔽用户选择
禁止用户选择页面中的文字或者图片

div {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

复制代码清除输入框内阴影
问题描述：在 iOS 上，输入框默认有内部阴影
解决方式：

input {
  -webkit-appearance: none;
}

复制代码禁止保存或拷贝图像

img {
  -webkit-touch-callout: none;
}

复制代码输入框默认字体颜色设置
设置 input 里面 placeholder 字体的颜色

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #c7c7c7;
}

复制代码用户设置字号放大或者缩小导致页面布局错误
设置字体禁止缩放

body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}

复制代码android系统中元素被点击时产生边框
部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。去除代码如下

a,button,input,textarea{
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-user-modify:read-write-plaintext-only; 
}

复制代码iOS 滑动不流畅
ios 手机上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。

解决方式
1.在滚动容器上增加滚动 touch 方法

.wrapper {
  -webkit-overflow-scrolling: touch;
}

复制代码2.设置 overflow 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。

body {
  overflow-y: hidden;
}
.wrapper {
  overflow-y: auto;
}

html iOS端去除Input的边框样式和阴影

input{
  outline-color: invert ;
  outline-style: none ;
  outline-width: 0px ;
  border: none ;
  border-style: none ;
  text-shadow: none ;
  -webkit-appearance: none ;
  -webkit-user-select: text ;
  outline-color: transparent ;
  box-shadow: none;
}

html 篇
常用的meta属性设置
meta对于移动端的一些特殊属性，可根据需要自行设置

<meta content="telephone=no" name="format-detection" />  //禁止 iOS 识别长串数字为电话
<meta name="screen-orientation" content="portrait">  //Android 禁止屏幕旋转
<meta content="email=no" name="format-detection" /> //不让 Android 手机识别邮箱
<meta name="format-detection" content="telephone=no" /> //禁止电话号码识别
<meta name="full-screen" content="yes"> //全屏显示
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,
maximum-scale=1.0,user-scalable=no" /> //H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="apple-mobile-web-app-capable" content="yes" />  //当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios

的safari ios7.0版本以后，safari上已看不到效果
将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
复制代码a标签唤起原生应用
同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a> //唤起邮箱

<a href="tel:123456">123456</a> //唤起电话
复制代码js篇
iPhone7用for...in 遍历数组失效
问题描述：最初学习使用js时，觉得for...in遍历比for循环简洁，后期在用户反馈后发现iPhone7不支持用for...in遍历数组
解决方式： 改为for循环遍历
移动端点击事件300 ms延迟问题
问题描述：移动端web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。
解决方式：

fastclick可以解决在手机上点击事件的300ms延迟
zepto.js的touch模块，tap事件也是为了解决在click的延迟问题

audio 和 video 在 ios 和 andriod 中自动播放
出于优化用户体验，苹果系统和安卓系统通常都会禁止自动播放和禁止页面加载时使用 JS 触发播放，必须由用户主动点击页面才可以触发播放。通过给页面根元素加touchstart的监听事件实现触发播放
$('html').one('touchstart', function() {
audio.play()
})
复制代码iOS 上拉边界下拉出现空白
问题描述：手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。
产生原因：在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。
解决方式：

document.body.addEventListener(
  'touchmove',
  function(e) {
    if (e._isScroller) return
    // 阻止默认事件
    e.preventDefault()
  },
  {
    passive: false
  }
)

复制代码ios 日期转换 NAN 的问题
将日期字符串的格式符号替换成'/'

'yyyy-MM-dd'.replace(/-/g, '/')