移动端兼容性问题解决方案

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

移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。

这是由于区分单机事件和双击屏幕缩放的历史原因造成的。

解决方式：

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

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

当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决

var oHeight = $(document).height(); //浏览器当前的高度

$(window).resize(function(){ 

　　if($(document).height() < oHeight){

　　　　$("#footer").css("position","static");

　　}else{

　　　　$("#footer").css("position","absolute");

　　}

});

3.禁止ios和android用户选中文字

-webkit-user-select:none

4.一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发

cursor:pointer

5.在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：

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

6.不同浏览器的标签默认的margin和padding不同

* { margin:0; padding:0; }

7.图片默认有间距

几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。（根本原因是fontSize）

解决方式：

1）给img标签添加左浮动float：left；

2）给img标签添加display：block；

8.上下margin的重叠问题

给上边元素设置了margin-bottom，给下边元素设置了margin-top，浏览器只会识别较大值；

解决方案：margin-top和margin-bottom中选择一个，只设置其中一个值；

9.不让 Android 手机识别邮箱

<meta content="email=no" name="format-detection" />

10.禁止 iOS 识别长串数字为电话

<meta content="telephone=no" name="format-detection" />

11.禁止 iOS 弹出各种操作窗口

-webkit-touch-callout:none

12.消除 transition 闪屏

-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ -webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/

13.iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格

this.value = this.value.replace(/\u2006/g, '');

14.禁止ios和android用户选中文字

-webkit-user-select:none

15.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.阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

17.Input 的placeholder会出现文本位置偏上的情况

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

18.往返缓存问题

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

window.onunload = function(){};

19.calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。

Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：

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

20.在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：

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

21.overflow: auto; IOS手机滚动卡顿

-webkit-overflow-scrolling: touch; //有回弹效果

22.不同浏览器的最小字体不同，有的是10px，有的是12px

设置字体时，不要小于12px,如果一定要小于12px，使用transform:sacle()进行缩放

23.文字两端居中text-align：justify；text-align-last：just；在移动端不起作用

使用&#160；代替空格

24.iPhoneX的适配---适配方案viewport-fit

（1）meta标签

iOS11新增了两个CSS函数env、constant，用于设定安全区域与边界的距离。

函数内部可以是四个常量：

  • safe-area-inset-left：安全区域距离左边边界距离
  • safe-area-inset-right：安全区域距离右边边界距离
  • safe-area-inset-top：安全区域距离顶部边界距离
  • safe-area-inset-bottom：安全区域距离底部边界距离

ios11为了适配iphoneX对现有的viewport meta标签新增一个特性：viewport-fit，如果客户端没有做全屏适配，那么页面想要全屏覆盖，则可使用该特性：

<meta name="viewport" content="width=device-width,viewport-fit=cover">

body { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }

当使用底部固定导航栏时，我们要为他们设置padding值：

{ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }

（2）媒体查询

1、利用constant函数

只有设置了viewport-fit=cover才能使用constant函数

@supports(bottom:constant(safe-area-inset-bottom)) { selector{ padding-bottom:constant(safe-area-inset-bottom); padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom)); //根据实际情况选择适配方法 } }

2、利用iphoneX独特的型号参数

@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) { #buy { padding-bottom:34px; } }

（3）js判断（以下采用Jquery）

if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){ #buy { padding-bottom:34px; } }

 

25.ios下取消input在输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

26.在ios和andriod中,audio元素和video元素在无法自动播放

触屏而播：

$('html').one('touchstart',function(){

audio.play()

})

27.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 }); 

28.event.srcElement

IE下，even不存在target属性

srcObj = event.srcElement ? event.srcElement : event.target;

29.父节点parentElement

ele.parentElement //firebox不支持 ele.parentNode //通用

 
 
 

 

posted @ 2020-08-05 18:27  Mmlzi  阅读(741)  评论(0)    收藏  举报