移动兼容问题以及解决
1.IOS移动端click事件300ms的延迟响应
移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。
原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。
解决方案：
- fastclick可以解决在手机上点击事件的300ms延迟
- zepto的touch模块，tap事件也是为了解决在click的延迟问题
- 触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题
2.一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发，css增加cursor:pointer就搞定了。
- 三星手机遮罩层下的input、select、a等元素可以被点击和focus(点击穿透)
问题发现于三星手机，这个在特定需求下才会有，因此如果没有类似问题的可以不看。首先需求是浮层操作，在三星上被遮罩的元素依然可以获取focus、click、change)，有两种解决方案，
1.是通过层显示以后加入对应的class名控制，截断显示层下方可获取焦点元素的事件获取
2.是通过将可获取焦点元素加入的disabled属性，也可以利用属性加dom锁定的方式（disabled的一种变换方式）
- h5底部输入框被键盘遮挡问题
h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决
var oHeight = $(document).height(); //浏览器当前的高度
$(window).resize(function(){
if($(document).height() < oHeight){
$("#footer").css("position","static");
}else{
$("#footer").css("position","absolute");
}
});
关于Web移动端Fixed布局的解决方案，这篇文章也不错
http://efe.baidu.com/blog/mobile-fixed-layout/
5.不让 Android 手机识别邮箱
<meta content="email=no" name="format-detection" />
6.禁止 iOS 识别长串数字为电话
<meta content="telephone=no" name="format-detection" />
7.禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none
8.消除 transition 闪屏
-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/
9.iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格
可以通过正则去掉 this.value = this.value.replace(/\u2006/g, '');
10.禁止ios和android用户选中文字
-webkit-user-select:none
11.在ios和andriod中,audio元素和video元素在无法自动播放
应对方案：触屏即播
$('html').one('touchstart',function(){
audio.play()
})
12.ios下取消input在输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
13.android下取消输入语音按钮
input::-webkit-input-speech-button {display: none}
14 CSS动画页面闪白,动画卡顿
解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
16.fixed定位缺陷
- ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
- android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
- ios4下不支持position:fixed
- 解决方案： 可用iScroll插件解决这个问题
17.阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
- Input 的placeholder会出现文本位置偏上的情况
input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal
- 往返缓存问题
点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache)有关系.
解决方法 ：window.onunload = function(){};
- calc的兼容性处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：
div {
width: 95%;
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
}
- iOS6下伪类:hover
除了之外的元素无效；在Android下则有效。类似
div#topFloatBar_l:hover #topFloatBar_menu { display:block; }
这样的导航显示在iOS6点击没有点击效果，只能通过增加点击侦听器给元素增减class来控制子元素。
-
在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：
- {-webkit-tap-highlight-color:rgba(0,0,0,0);}
不过这个方法在现在的安卓浏览器下，只能去掉那个橙色的背景色，点击产生的高亮边框还是没有去掉，有待解决！
一个CSS3的属性，加上后，所关联的元素的事件监听都会失效，等于让元素变得“看得见，点不着”。IE到11才开始支持，其他浏览器的当前版本基本都支持。详细介绍见这里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
pointer-events: none;
- Zepto点透的解决方案
zepto的tap是通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,在点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发，而在冒泡到document之前，用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计)，所以在执行完tap事件之后，弹出来的选择组件马上就隐藏了，此时click事件还在延迟的300ms之中，当300ms到来的时候，click到的其实不是完成而是隐藏之后的下方的元素，如果正下方的元素绑定的有click事件此时便会触发，如果没有绑定click事件的话就当没click，但是正下方的是input输入框(或者select选择框或者单选复选框)，点击默认聚焦而弹出输入键盘，也就出现了上面的点透现象。
引入fastclick.js，在页面中加入如下js代码
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
或者有zepto或者jQuery的js里面加上
$(function() {
FastClick.attach(document.body);
});
当然require的话就这样：
var FastClick = require('fastclick');
FastClick.attach(document.body, options);
方案二：用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()
$("#cbFinish").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});
方案三：延迟一定的时间(300ms+)来处理事件
$("#cbFinish").on("tap", function (event) {
setTimeout(function(){
//很多处理比如隐藏什么的
},320);
});
24.华为荣耀3C的原生浏览器问题：
同一行内，存在靠左与靠右的元素时，都必须加上浮动，否则，右浮元素不右浮，影响后续排版。
<div class="forcast-title">
<span class="fl">上一交易日预报结果</span>
<span class="fr gray">2016-03-04</span>
</div>
<div class="forcast-cnt ofh gray cb"></div>
两个行内元素span元素都要浮动才行。
25.ios safari时间显示问题。
之前设置new Date日期格式的时候，在ios中的safari中发现显示效果与其他浏览器不一致，找了多方面原因，结果是把“-”换成“/”就可以解决了。new Date(“year-month-day”);只识别new Date(“year/month/day”);
26.关于长按识别二维码问题。
安卓设备微信中识别没问题，结果到了ios中识别不了。最终发现是将position设置为fixed，ios的微信中长按会不起作用。要想在ios的微信中实现长按识别二维码，只需确保二维码图片和包住图片的div都没有设置position:fiexd即可。
27.移动端最小识别rem问题。
移动端相对来说兼容性不是什么问题，但是实际项目中发现，如果采用rem: .01rem;有些机型如：魅蓝note、iphone5等机型的webview中显示不出来。华为荣耀有的设置border的时候，有时0.03rem可以，有时不可以，暂时不明所以。所以还是建议，像border这种属性，移动端可以设置为1px。
28.点击跳转到新页面会有类似点击穿透效果。
部分机型（三星note2、htc one …）在app的webview中出现了点击链接跳转到下一页面后，如果要跳转页面在当前页面的按钮位置有a链接的话，会出现，点击当前页面链接，直接也点击了下一页吗的链接。
可能描述的不是很清楚，更形象点说。A页面有个链接a，B页面也有个链接b，并且b的x、y属性含于a的x、y属性。那么会出现点击a链接，直接也点击了b链接。
解决办法，直接在另一个页面写了个maskView遮罩层，setTimeout100毫秒解决的。可能有点low，但是当时上线较急，就想到了这个办法。
29.让hybird app中的webview页面看起来更像native。
web相较于native有一个好处就是版本更新比较方便，不会出现native应用商店审核乱七八糟的时间，直接点击app的某个按钮，使用webview打开页面，该页面随意替换都非常方便。最常用的就是活动页面，定期的活动只需要前端开发人员维护即可。但是假如用户长按屏幕的时候出现选中文本的场景，看起来不那么想native，如果有解决这个问题的需求，可使用：
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
其中Element为任意元素，或者直接将其写入cssReset文件中。
30.移动端300ms延迟。
300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。
推荐两个js，一个是fastclick，一个是tap.js
关于300ms延迟，具体请看
31.移动端 HTML5 audio autoplay 失效问题
这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。
解决代码：
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
32.根据屏幕大小加载不同js
之前话k线用到highcharts的时候，在iphone5上发现显示不是很理想，用过highchars的api设置也没有解决一次设定适应多个屏幕。于是只能用过这种方式来进行多屏幕的适配。
<script>
var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var script = document.createElement("script");
if(browserWidth <= 380) {
script.src = "js/common_small.js"
}else{
script.src = "js/common.js"
}
document.head.appendChild(script);
</script>
33.屏幕旋转的事件和样式
事件名：window.orientation，取值：正负90表示横屏模式，0和180表示竖屏模式。
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("横屏:" + window.orientation);
case 0:
case 180:
alert("竖屏:" + window.orientation);
break;
}
}
有些地方发现屏幕旋转之后，样式适配不完美，所以根据上面的orientation事件，增加了监测到设备屏幕旋转自动刷新的功能：
function hengshuping(){
window.location.reload();
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
34.background-size问题：
华为p8，魅族自带浏览器background-size显示有问题。
35.flex布局问题：
iphone5s、魅族魅蓝note不支持(具体是自带浏览器还是什么浏览器忘了，有需要的可以自己尝试一下)
36.input输入框的问题
最开始在input输入框中，也会习惯性的写上lineheight（其实可以不写），当使用placeholder的时候自己测试也没有问题。但当测试用魅族mx4自带浏览器测试的时候发现，在input输入框中，输入光标不会上下居中。当时也感觉很奇怪，然而将lineheight删掉就可以了，input中的所有元素就是默认居中的。
原文：https://blog.csdn.net/weixin_38194357/article/details/69267451
1、外观
A、页面高度渲染错误
在各移动端浏览器中经常会出现这种页面高度100%的渲染错误，页面低端和系统自带的导航条重合了，高度的不正确我们需要重置修正它，通过javascript代码重置掉：
document.documentElement.style.height = window.innerHeight + 'px';
B、叠加区高亮
在部分android机型中点击页面某一块区域可能会出现如图所示的黄色框秒闪，这是部分机型系统自身的默认定制样式，给该元素一个CSS样式重置掉：
-webkit-tap-highlight-color:rgba(0,0,0,0);
2、行为
A、事件无法被触发
在部分android机型的微信环境中会出现事件无法触发、表单无法输入的情况，我们针对需要输入或者触发事件的元素设置样式：-webkit-transform: translate3d(0,0,0) ，不过新版本的微信已经直接修复了该问题。
B、:active 效果不兼容
在android 4.0版本以下CSS :active伪状态效果无法兼容，我们给该元素的touch系列的事件（touchstart/touchend/touchmove）绑定一个空匿名方法:
var element=document.getElementsById(”btnShare”);
element.addEventListener(‘touchstart’,function(){},false);
3、应用
A、浏览器崩溃
var act = function(){
window.removeEventListener('devicemotion',act);
};
window.addEventListener('devicemotion',act,false);
解绑函数写在了事件处理中导致小米手机中的微信崩溃，那么我们不要将解绑时间写在事件处理中即可。
B、预加载、自动播放无效
如上表所示，经过简单的测试发现预加载、自动播放的有效性受操作系统、浏览器（webview）、版本等的影响，苹果官方规定必须由用户手动触发才会载入音频，那么我们捕捉一次用户输入后，让音频加载实现预加载:
//play and pause it once
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
C、无法同时播放多音频
在android设备中,播放后一音频会打断前一音频，而不会同步播放,这个是目前系统资深决定的，我们只有采取优雅降权的方法让android选择不一样风格的音频前后切换播放而不是同时播放，达到与预期接近的音频效果。
D、不支持局部滚动
在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 样式设置滚动条无效，这里有两种解决方案:
1、巧用布局直接设置样式滚动条在body(html)上，其他元素“错觉滚动”。
2、利用iscroll、自写js控制translate、scrollTop模拟
4、系统/硬件
A、怪异悬浮的表单
在部分android 机型中的输入框可能会出现如图怪异的多余的浮出表单，经过观察与测试发现只有input:password类型的输入框存在，那么我们只要使用input:text类型的输入框并通过样式-webkit-text-security: disc; 隐藏输入密码从而解决。
B、错误出现滚动条
在游戏内嵌页中出现了不应该出现的滚动条，而且内容并没有超出内容区宽度，经过测试overflow:hidden 无效，通过一系列尝试使用古老的 <body scroll="no"> 写法解决，多尝试一下不同的写法和属性会有不一样的惊喜哦！
C、链接打开系统浏览器
在游戏内webview的部分android机型中可能会出现点击链接调用系统浏览器的情况，这是一个非常不好的体验。那么我们尝试给这个元素添加 target="_blank"' 属性有可能解决，如果还不能解决那么需要修改IOS或android原生系统函数了。
D、Flex box 不兼容
在游戏内嵌webview中碰到Flex box布局不兼容的情况，图中所示下面部分的导航错位了，虽然之前有仔细查看过Flex box的兼容性，但是在游戏内嵌页中无法确定其调用的系统浏览器版本及兼容，所以导致错误，所以我们写完整历史版本呢的3种Flex box 解决。那么我们思考在写页面过程中还是本着保守稳定的方式书写样式可以减少不不要的麻烦。
3088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
