移动端问题收集和解决
tap击穿问题
问题描述
绑定tap方法的dom元素，触发该方法时，该dom元素下方同一位置的dom元素会触发click事件或者有浏览器认为可以被点击交互的dom元素（input的focus事件），称为tap击穿现象。
产生原因
1、click事件在移动端会有300ms的延迟，因为需要检测双击事件。移动端300ms延迟原因
2、zepto的tap事件是绑定在document.body上的，tap事件执行（冒泡之后）之前，click事件已经被”执行”，只是被延迟了而已，所以在tap事件用preventDefault也没用
解决方案
1、上下元素使用同样的事件，同样适用tap或者click事件
2、使用fastclick库，会把click的300ms延迟干掉
3、自己封装tap事件，使用touchstart、touchend、touchmove事件，e.preventEvent()将事件阻止
//封装一个tap事件
function tap(ele, callback) {
var tag = 0;
// 手机端和移动端不同处理
if (isMobile()) {
$(ele).on('tuochstart', function(event) {
event.preventDefault();
tag = 0;
// 如果移动了，则不计入tap事件
}).on('touchmove', function() {
tag = 1;
}).on('touchend', function(event) {
if (tag == 0) {
callback(event);
}
})
} else {
$(ele).on('click', function(event) {
callback(event);
})
}
}position: fixed + input输入框问题
问题描述
IOS下，当input输入框获取焦点focus，弹起虚拟键盘之后，页面上position: fixed的元素的位置会错乱。
解决方案
1、当input元素focus时，改成position: absolute，blur的时候再将定位改为 position: fixed
2、使用iscroll库
3、使用div内滚动
消除 transition 闪屏
-webkit-transform-style: preserve-3d;
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/IOS字体大小重置
问题描述
iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等) iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。
解决方案
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;一些有用的属性
不让 Android 手机识别邮箱
<meta content="email=no" name="format-detection" />禁止 iOS 识别长串数字为电话
<meta content="telephone=no" name="format-detection" />禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none禁止用户选中文字
-webkit-user-select:nonetranslate
动画效果中，使用translate比使用定位性能高，且性能更好。
使用setTimeout
问题描述
使用下述的语句，会使得code立即执行
setTimeout(function(){
//.….code
},0);原理：JavaScript下的setTimeout(fn,0)意味着什么？
Safari浏览器input输入框
问题描述
在safari下，input输入框，点击时会有一个默认的小人出现，点击后会自动补充联系人的信息
解决办法
只有将其隐藏
input::-webkit-contacts-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
position: absolute;
right: 0;
}移动端input文字输入-文字输入限制
问题描述
当用户进行中文输入时，input 事件会截断非直接输入，什么是非直接输入呢，在我们输入汉字的时候，比如说「开心」，中间过程中会输入拼音，每次输入一个字母都会触发 input 事件，然而在没有点选候选字或者点击「选定」按钮前，都属于非直接输入。
解决办法
此时，input事件需要结合compositionstart和compositionend 这两个事件。 compositionstart: 开始非直接输入开始时触发 compositionend：非直接输入结束时触发。
var inputLock = false;
function do(inputElement) {
var regex = /[^1-9a-zA-Z]/g;
inputElement.value = inputElement.value.replace(regex, '');
}
inputElement.addEventListener('compositionstart', function() {
inputLock = true;
});
inputElement.addEventListener('compositionend', function(event) {
inputLock = false;
do(event.target);
})
inputElement.addEventListener('input', function(event) {
if (!inputLock) {
do(event.target);
event.returnValue = false;
}
});移动端input文字输入-emoji表情输入
问题描述
当输入emoji表情的时候，js中判断emoji表情的长度是不一致的，不同表情的length也不同，跟unicode编码有关。
解决办法
限制字数，当超过字数限制的时候，把前16个字截断显示出来。
textarea置底展示问题
问题描述
ios中的输入唤起键盘后，整个页面会被键盘压缩，也就是说页面的高度变小，并且所有的fixed全部变为了absolute。键盘会将页面顶上去。那么如果希望可以将输入框和键盘完全贴合，我们可以使用div模拟一个假的输入框，使用定位将真正的输入框隐藏掉，当点击假的输入框的时候，将真正的输入框定位到键盘上方，并且手动获取输入框焦点。
解决办法
在实现过程中需要注意下面几个问题： 1、真正的输入框的位置计算： 首先记录无键盘时的window.innerHeight，当键盘弹出后再获取当前的window.innerHeight，两者的差值即为键盘的高度，那么定位真输入框自然就很容易了 2、在ios下手动获取焦点不可以用click事件，需要使用tap事件才可以手动触发
$('#fake-input').on($.os.ios?'tap' : 'click', function() {
initHeight = window.innerHeight;
$('#input').focus();
});3、当键盘收起的时候我们需要将真输入框再次隐藏掉，除了使用失去焦点（blur）方法，还有什么方法可以判断键盘是否收起呢？ 这里可以使用setInterval监听，当当前window.innerHeight和整屏高度相等的时候判断为键盘收起。 注意：键盘弹起需要一点时间，所以计算当前屏幕高度也需要使用setInterval 4、因为textarea中的文字不能置底显示，当输入超过一行textarea需要自动调整高度，因此将scrollHeight赋值给textarea的height。当删除文字的时候需要height也有变化，因此每次input都先将height置0，然后再赋值。
$('#textarea').css('height', 0);
$('#textarea').css('height', $('#textarea')[0].scrollHeight);