1.浮层弹框 蒙层下锁死
首先定义一个函数
// 禁止默认事件触发
function unableTouchmove(evt) {
evt.preventDefault();
}
点击事件加上述如下代码
$('body').css({'overflow':'hidden'});
document.body.addEventListener("touchmove", unableTouchmove, {
passive: false
});
$('.container').addClass('addStyle');
弹层消失的时候
$('.common-close').click(function(ev){
var e = e || ev;
e.preventDefault();
e.stopPropagation();
$('.dialog').hide().children('.dialog-content').hide();
document.body.removeEventListener("touchmove", unableTouchmove);
$('body').css('overflow','auto');
$('.container').removeClass('addStyle');
});
addStyle 这个class 类主要就是 给浮层下边 给绝对定位的 为了兼容ios 手机，ios 对固定位不友好
.addStyle{width:100%;height:100%;position:absolute;top:0;left:0;}
以上解决两个问题
第一个锁死的时候关键代码
document.body.addEventListener("touchmove", unableTouchmove, {
passive: false //这个参数是关键 Dom 规范改了
});
第二个是 如果用固定定位 弹层上的如果有input 会出现情况就光标不会再输入框里边
如果页面是一屏 弹层上有输入框 弹起来吊起键盘 输入完成之后 弹层下边 内容不会回滚原位置
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
document.body.addEventListener('focusout', function(){
//软键盘收起的事件处理
if(isiOS){
setTimeout(function(){
window.scrollTo(0,0)
})
}
},{passive: false});
ios 失去焦点事件类型 focusout
===============================================================================================
passive 的事件监听器
很久以前，addEventListener() 的参数约定是这样的：
addEventListener(type, listener, useCapture)
后来，最后一个参数，也就是控制监听器是在捕获阶段执行还是在冒泡阶段执行的 useCapture 参数，变成了可选参数（传 true 的情况太少了），成了：
addEventListener(type, listener[, useCapture ])
去年年底，DOM 规范做了修订：addEventListener() 的第三个参数可以是个对象值了，也就是说第三个参数现在可以是两种类型的值了：
addEventListener(type, listener[, useCapture ])
addEventListener(type, listener[, options ])
这个修订是为了扩展新的选项，从而自定义更多的行为，目前规范中 options 对象可用的属性有三个：
addEventListener(type, listener, {
capture: false,
passive: false,
once: false
})
三个属性都是布尔类型的开关，默认值都为 false。其中 capture 属性等价于以前的 useCapture 参数；once 属性就是表明该监听器是一次性的，执行一次后就被自动 removeEventListener 掉，还没有浏览器实现它；passive 属性是本文的主角，Firefox 和 Chrome 已经实现，先看个 Chrome 官方的视频介绍（单击播放）
https://www.cnblogs.com/ziyunfei/p/5545439.html
===========================================================================================
2.如果想让你做的页面在手机上文字不被选择在 css 里边加入
body{ -webkit-user-select: none;user-select: none;-ms-user-select: none;}
3.华为是低版本uc内核
不兼容flex
然后.child加-ms-flex：1和-webkit-box-flex：1
.child还要加display：block和width0
4.input 如果是button 类型 ios 上加上这个句 -webkit-appearance: none;
5.iphoneX 兼容问题
2.如果想对某个元素进行底部上移或者顶部下移可以做以下适配。
注：如果想下面constant env 属性有效果，请务必添加上面meta 标签才能实现。
/*
* iphoneX pulic css
* 2018-01-01
*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
body{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.iphonex-pt{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
.iphonex-pb{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.iphonex-mt{
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
}
.iphonex-mb{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
.iphonex-pl{
padding-left: constant(safe-area-inset-left);
padding-left: env(safe-area-inset-left);
}
.iphonex-pr{
padding-right: constant(safe-area-inset-right);
padding-right: env(safe-area-inset-right);
}
.iphonex-ml{
margin-left: constant(safe-area-inset-left);
margin-left: env(safe-area-inset-left);
}
.iphonex-mr{
margin-right: constant(safe-area-inset-right);
margin-right: env(safe-area-inset-right);
}
.iphonex-bd-top-bg{
border-top: 88px solid transparent;
}
.iphonex-bd-top{
border-top: 44px solid transparent;
}
.iphonex-bd-bottom{
border-bottom: 34px solid transparent;
}
}
3.js 方法，有些接口必须用js 去处理，不能用css样式实现，那么就可以这样做
if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){
$(".phonex-pb").css("padding-bottom","34px");
}
ps: 写在后面
对于constant(safe-area-inset-bottom) 这样的属性完全可以不用写在media 媒体查询里面，上面只是做了公共样式处理，safe-area-inset-bottom 意义其实相当于 底部34px。类似padding-bottom:34px;考虑其他兼容问题，多做了一个透明border 处理方法，仅仅是一种解决方式而已，其实都能实现。
//这是我整理的方法，只对个人项目的兼容，仅供参考。
---------------------
作者：zhaoshuang1010
来源：CSDN
原文：https://blog.csdn.net/zhaoshuang1010/article/details/78919059
版权声明：本文为博主原创文章，转载请附上博文链接！
https://www.cnblogs.com/lolDragon/p/7795174.html