移动端页面兼容性问题解决方案整理（三）

时间 2019-11-09

原文原文链接

1. IOS移动端click事件300ms的延迟响应

移动设备上的web网页是有300ms延迟的，玩玩会形成按钮点击延迟甚至是点击失效。这是因为区分单击事件和双击屏幕缩放的历史缘由形成的,javascript

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展现在手机端上，使用了双击缩放(double tap to zoom)的方案，好比你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然能够撑满整个屏幕，可是字体、图片都很小看不清，此时能够快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。css

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。html

缘由就出在浏览器须要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转连接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击连接仍是要双击该部分区域进行缩放操做，因此，捕获第一次单击后，浏览器会先Hold一段时间t，若是在t时间区间里用户未进行下一次点击，则浏览器会作单击跳转连接的处理，若是t时间里用户进行了第二次单击操做，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操做。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。形成的后果用户纯粹单击页面，页面须要过一段时间才响应，给用户慢体验感受，对于web开发者来讲是，页面js捕获click事件的回调函数处理，须要300ms后才生效，也就间接致使影响其余业务逻辑的处理。java

解决方案：android

fastclick能够解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也能够经过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题

2.一些状况下对非可点击元素如(label,span)监听click事件，ios下不会触发，css增长cursor:pointer就搞定了。

3. 三星手机遮罩层下的input、select、a等元素能够被点击和focus(点击穿透)

问题发现于三星手机，这个在特定需求下才会有，所以若是没有相似问题的能够不看。首先需求是浮层操做，在三星上被遮罩的元素依然能够获取focus、click、change)，有两种解决方案，ios

1.是经过层显示之后加入对应的class名控制，截断显示层下方可获取焦点元素的事件获取git

2.是经过将可获取焦点元素加入的disabled属性，也能够利用属性加dom锁定的方式（disabled的一种变换方式）github

4. h5底部输入框被键盘遮挡问题

h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用以下方式解决web

var oHeight = $(document).height(); //浏览器当前的高度
   
   $(window).resize(function(){
 
        if($(document).height() < oHeight){
         
        $("#footer").css("position","static");
    }else{
         
        $("#footer").css("position","absolute");
    }
        
   });

关于Web移动端Fixed布局的解决方案，这篇文章也不错api

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;}

18 Input 的placeholder会出现文本位置偏上的状况

input 的placeholder会出现文本位置偏上的状况：PC端设置line-height等于height可以对齐，而移动端仍然是偏上，解决是设置line-height：normal

19 往返缓存问题

点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache)有关系。

解决方法 ：window.onunload = function(){};

20. calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，因此要在以前增长一个保守尺寸：

div { 
    width: 95%; 
    width: -webkit-calc(100% - 50px); 
    width: calc(100% - 50px); 
}

21 iOS6下伪类:hover

除了<a>以外的元素无效；在Android下则有效。相似

div#topFloatBar_l:hover #topFloatBar_menu { display:block; }

这样的导航显示在iOS6点击没有点击效果，只能经过增长点击侦听器给元素增减class来控制子元素。

22 在移动端修改难看的点击的高亮效果，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;

23. 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代码

1 window.addEventListener( "load", function() {
2     FastClick.attach( document.body );
3 }, false );

或者有zepto或者jQuery的js里面加上

1 $(function() {
2     FastClick.attach(document.body);
3 });

固然require的话就这样：

1 var FastClick = require('fastclick');
2 FastClick.attach(document.body, options);

方案二：用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

1 $("#cbFinish").on("touchend", function (event) {
2     //不少处理好比隐藏什么的
3     event.preventDefault();
4 });

方案三：延迟必定的时间(300ms+)来处理事件

1 $("#cbFinish").on("tap", function (event) {
2     setTimeout(function(){
3     //不少处理好比隐藏什么的
4     },320);
5 });

一、外观

A、页面高度渲染错误

在各移动端浏览器中常常会出现这种页面高度100%的渲染错误，页面低端和系统自带的导航条重合了，高度的不正确咱们须要重置修正它，经过javascript代码重置掉：

document.documentElement.style.height = window.innerHeight + 'px';

B、叠加区高亮

在部分android机型中点击页面某一块区域可能会出现如图所示的黄色框秒闪，这是部分机型系统自身的默认定制样式，给该元素一个CSS样式重置掉：

-webkit-tap-highlight-color:rgba(0,0,0,0);

二、行为

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);

三、应用

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 样式设置滚动条无效，这里有两种解决方案:

一、巧用布局直接设置样式滚动条在body(html)上，其余元素“错觉滚动”。

二、利用iscroll、自写js控制translate、scrollTop模拟

四、系统/硬件

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 解决。那么咱们思考在写页面过程当中仍是本着保守稳定的方式书写样式能够减小不不要的麻烦。

http://www.cnblogs.com/wangpenghui522/p/5398137.html