1.浮層彈框 蒙層下鎖死
首先定義一個(gè)函數(shù)
// 禁止默認(rèn)事件觸發(fā)
function unableTouchmove(evt) {
? ? evt.preventDefault();
}
? 點(diǎn)擊事件加上述如下代碼
$('body').css({'overflow':'hidden'});
? ? document.body.addEventListener("touchmove", unableTouchmove, {
? ? ? ? passive: false
? ? });
? ? $('.container').addClass('addStyle');
彈層消失的時(shí)候
$('.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 這個(gè)class 類主要就是? 給浮層下邊 給絕對(duì)定位的 為了兼容ios 手機(jī)，ios 對(duì)固定位不友好
.addStyle{width:100%;height:100%;position:absolute;top:0;left:0;}
以上解決兩個(gè)問題
第一個(gè)鎖死的時(shí)候關(guān)鍵代碼
document.body.addEventListener("touchmove", unableTouchmove, {
? ? ? ? passive: false //這個(gè)參數(shù)是關(guān)鍵 Dom 規(guī)范改了
? ? });
第二個(gè)是 如果用固定定位 彈層上的如果有input 會(huì)出現(xiàn)情況就光標(biāo)不會(huì)再輸入框里邊
如果頁面是一屏 彈層上有輸入框 彈起來吊起鍵盤 輸入完成之后 彈層下邊 內(nèi)容不會(huì)回滾原位置
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 失去焦點(diǎn)事件類型 focusout
===============================================================================================
passive 的事件監(jiān)聽器
很久以前，addEventListener() 的參數(shù)約定是這樣的：
addEventListener(type, listener, useCapture)
后來，最后一個(gè)參數(shù)，也就是控制監(jiān)聽器是在捕獲階段執(zhí)行還是在冒泡階段執(zhí)行的 useCapture 參數(shù)，變成了可選參數(shù)（傳 true 的情況太少了），成了：
addEventListener(type, listener[, useCapture ])
去年年底，DOM 規(guī)范做了修訂：addEventListener() 的第三個(gè)參數(shù)可以是個(gè)對(duì)象值了，也就是說第三個(gè)參數(shù)現(xiàn)在可以是兩種類型的值了：
addEventListener(type, listener[, useCapture ])
addEventListener(type, listener[, options ])
這個(gè)修訂是為了擴(kuò)展新的選項(xiàng)，從而自定義更多的行為，目前規(guī)范中 options 對(duì)象可用的屬性有三個(gè)：
addEventListener(type, listener, {
? ? capture: false,
? ? passive: false,
? ? once: false
})
三個(gè)屬性都是布爾類型的開關(guān)，默認(rèn)值都為 false。其中 capture 屬性等價(jià)于以前的 useCapture 參數(shù)；once 屬性就是表明該監(jiān)聽器是一次性的，執(zhí)行一次后就被自動(dòng) removeEventListener 掉，還沒有瀏覽器實(shí)現(xiàn)它；passive 屬性是本文的主角，F(xiàn)irefox 和 Chrome 已經(jīng)實(shí)現(xiàn)，先看個(gè) Chrome 官方的視頻介紹（單擊播放）
https://www.cnblogs.com/ziyunfei/p/5545439.html
===========================================================================================
2.如果想讓你做的頁面在手機(jī)上文字不被選擇在 css 里邊加入
body{ -webkit-user-select: none;user-select: none;-ms-user-select: none;}
3.華為是低版本uc內(nèi)核
不兼容flex
然后.child加-ms-flex：1和-webkit-box-flex：1
.child還要加display：block和width0
4.input 如果是button 類型 ios 上加上這個(gè)句 -webkit-appearance: none;
5.iphoneX? 兼容問題
2.如果想對(duì)某個(gè)元素進(jìn)行底部上移或者頂部下移可以做以下適配。
? ?注：如果想下面constant env 屬性有效果，請(qǐng)務(wù)必添加上面meta 標(biāo)簽才能實(shí)現(xiàn)。
/*
?*? 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樣式實(shí)現(xiàn)，那么就可以這樣做
if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){
? ? ? ? $(".phonex-pb").css("padding-bottom","34px");
}
ps: 寫在后面
對(duì)于constant(safe-area-inset-bottom) 這樣的屬性完全可以不用寫在media 媒體查詢里面，上面只是做了公共樣式處理，safe-area-inset-bottom 意義其實(shí)相當(dāng)于 底部34px。類似padding-bottom:34px;考慮其他兼容問題，多做了一個(gè)透明border 處理方法，僅僅是一種解決方式而已，其實(shí)都能實(shí)現(xiàn)。
//這是我整理的方法，只對(duì)個(gè)人項(xiàng)目的兼容，僅供參考。
---------------------
作者：zhaoshuang1010
來源：CSDN
原文：https://blog.csdn.net/zhaoshuang1010/article/details/78919059
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)附上博文鏈接！
https://www.cnblogs.com/lolDragon/p/7795174.html
