年后第一天到公司上班，整理一些在移动端H5开发常见的问题给大家做下分享，这里很多是自己在开发过程中遇到的大坑或者遭到过吐糟的问题，希望能给大家带来或多或少的帮助，喜欢的大佬们可以给个小赞，如果有问题也可以一起讨论下。
下面是最近一个月整理的JS基础总结，可供大家温故而知新。
本人github: github.com/Michael-lzg
开箱即用的JS干货助力金三银四
JS基础总结（1）——数据类型
JS基础总结（2）——原型与原型链
JS基础总结（3）——作用域和闭包
JS基础总结（4）——this指向及call/apply/bind
JS基础总结（5）—— JS执行机制与EventLoopd
html 篇
常用的meta属性设置
meta对于移动端的一些特殊属性，可根据需要自行设置
7 位数字，形如：1234567
带括号及加号的数字，形如：(+86)123456789
双连接线的数字，形如：00-00-00111
11 位数字，形如：13800138000
关闭识别
复制代码开启识别 123456 复制代码邮箱识别（Android） 安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的 meta 来管别邮箱的自动识别： 复制代码同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：/* 四条边 */
.setBorderAll {
position: relative;
&:after {
content: ’ ';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
box-sizing: border-box;
border: 1px solid #e5e5e5;
border-radius: 4px;
}
}
复制代码屏蔽用户选择
禁止用户选择页面中的文字或者图片
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 上，输入框默认有内部阴影,以这样关闭：
div {
-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。
解决方案
在滚动容器上增加滚动 touch 方法
.wrapper {
-webkit-overflow-scrolling: touch;
}
复制代码
设置 overflow
设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。
body {
overflow-y: hidden;
}
.wrapper {
overflow-y: auto;
}
复制代码js 篇
移动端click屏幕产生200-300 ms的延迟响应
移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。解决方案：
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序
ontouchstart
ontouchmove
ontouchend
onclick
audio 和 video 在 ios 和 andriod 中自动播放
这个不是bug，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。加入自动触发播放的代码
$(‘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, ‘/’)
复制代码软键盘问题
IOS 键盘弹起挡住原来的视图
可以通过监听移动端软键盘弹起
Element.scrollIntoViewIfNeeded（Boolean）方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。
true，则元素将在其所在滚动区的可视区域中居中对齐。
false，则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。
window.addEventListener(‘resize’, function() {
if (
document.activeElement.tagName === ‘INPUT’ ||
document.activeElement.tagName === ‘TEXTAREA’
) {
window.setTimeout(function() {
if (‘scrollIntoView’ in document.activeElement) {
document.activeElement.scrollIntoView(false)
} else {
document.activeElement.scrollIntoViewIfNeeded(false)
}
}, 0)
}
})
复制代码onkeyUp 和 onKeydown 兼容性问题
IOS 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，但是在 ios 手机浏览器中用输入法输入之后，并未立刻相应 keyup 事件
IOS12 输入框难以点击获取焦点，弹不出软键盘
定位找到问题是 fastclick.js 对 IOS12 的兼容性，可在 fastclick.js 源码或者 main.js 做以下修改
FastClick.prototype.focus = function(targetElement) {
var length
if (
deviceIsIOS &&
targetElement.setSelectionRange &&
targetElement.type.indexOf(‘date’) !== 0 &&
targetElement.type !== ‘time’ &&
targetElement.type !== ‘month’
) {
length = targetElement.value.length
targetElement.setSelectionRange(length, length)
targetElement.focus()
} else {
targetElement.focus()
}
}
复制代码IOS 键盘收起时页面没用回落，底部会留白
通过监听键盘回落时间滚动到原来的位置
window.addEventListener(‘focusout’, function() {
window.scrollTo(0, 0)
})
//input输入框弹起软键盘的解决方案。
var bfscrolltop = document.body.scrollTop
$(‘input’)
.focus(function() {
document.body.scrollTop = document.body.scrollHeight
//console.log(document.body.scrollTop);
})
.blur(function() {
document.body.scrollTop = bfscrolltop
//console.log(document.body.scrollTop);
})
复制代码IOS 下 fixed 失效的原因
软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。
解决方法: 不让页面滚动，而是让主体部分自己滚动,主体部分高度设为 100%，overflow:scroll
