浏览器兼容性问题

1.苹果手机浏览器$(document).on("click",function(){})点击无效的问题(转）

   问题：动态生成元素的点击事件$(document).on(“click”,function(){})在andriod设备和电脑浏览器模拟上可以触发，而在apple移动设备上却无法触发；

   解决方法：需要绑定事件的元素添加一个css cursor: pointer 。
    selector {
                 cursor:pointer
     }

2.安卓手机webview 在手机字体放大时显示异常

  不能将容器width设置750px，应将max-width设置750px；

  为防止手机字体放大问题，安卓webview应设置webview.getSettings().setTextZoom(100)  原文链接 https://blog.csdn.net/u013778905/article/details/77972841

 

3.弹出遮罩层之后禁止页面滚动；

   只设置document.body.style.overflow='hidden'只在部分手机生效，应获取当前页面位置之后设置document.body.style.position='fixed'；document.body.style.top='距离'；弹出层消失后position去掉，页面再滚动到之前的记录位置

 

4、IOS fastclick 获取焦点点击失效，需要多次点击（混合开发）

应用场景：因为项目用前端混合式开发，在ios手机会有300ms的延迟，所以用到了[fastclick.js]

https://blog.csdn.net/wf00334814/article/details/87856486

5、css消除点击时ios上出现对应的阴影区域

* {
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent; /* For some Androids */ 
}

 6、当页面中很多a标签包裹着img标签时，在ios上会出现页面滑动卡顿的情况。

    解决： a标签和img标签都设置dispaly：block，并且img不要设置宽高auto

7、object.values在ios9上有兼容性问题，会返回undefined；

8、苹果手机iOS11中fixed弹出框中input光标错位问题

https://www.cnblogs.com/zhenqichai/p/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug.html

此外还可以：

在实践中最外层的div设置的是position：fixed，父级设置的是position：absolute。
出现问题的解决方法是通过jQuery处理：
在弹窗显示的时候，设置body的position：fixed

$('body').css({'position': 'fixed', 'width': '100%'});

　弹窗隐藏的时候，设置body的position：''

$('body').css({'position': '', 'width': ''});

9、css隐藏输入框的光标

　1.隐藏光标

input{
color: transparent;
}

2.显示文字

input{
color: transparent;
text-shadow: 0 0 0 #000;
}

以上的方法可能在PC或者安卓的手机上是好的，在IOS系统就不行了。
在ios中采取的方法是将输入框光标移走：

input {
opacity: 0;
z-index: 999;
outline: none;
border: none;
color: transparent;
text-indent: -999em;
margin-left: -100%;
width: 200%;
}