資訊專欄INFORMATION COLUMN
摘要：判斷是否是手機(jī)底部增加樣式底部增加樣式初始條件滿足增加樣式如果想更改底部像素的背景顏色怎么辦呢增加樣式
1.判斷是否是IPhoneX手機(jī)
let isIphone = /iphone/gi.test(window.navigator.userAgent)
let windowW = window.screen.width
let windowH = window.screen.height
let pixelRatio = window.devicePixelRatio
let isIPhoneX = isIphone && pixelRatio && pixelRatio === 3 && windowW === 375 && windowH === 812
let isIPhoneXSMax = isIphone && pixelRatio && pixelRatio === 3 && windowW === 414 && windowH === 896
let isIPhoneXR = isIphone && pixelRatio && pixelRatio === 2 && windowW === 414 && windowH === 896
if (isIPhoneX || isIPhoneXSMax || isIPhoneXR) {
// 底部增加fix-iphonex-bottm 樣式
$(".contact-box").addClass("fix-iphonex-bottom")
// 底部增加iphone-footer-bg樣式 初始none,條件滿足block
$(".iphone-footer-bg").addClass("iphonexshow")
}
2.增加fix-iphonex-bottom樣式
.fix-iphonex-bottom {
bottom: 34px !important;
}
如果想更改IPhoneX底部34像素的背景顏色怎么辦呢？
3.增加iphone-footer-bg樣式
.iphone-footer-bg {
height: 34px;
background: #6D6D6D;
width: 100%;
position: absolute;
bottom: -33px;
display: none;
}
.iphonexshow {
display: block !important;
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/114869.html
摘要：由于做了全面屏并且還保留一塊小劉海，因此很多以前的移動端頁面需要結(jié)合客戶端做出相應(yīng)的適配，具體如下頂部通欄之前的客戶端一直采用狀態(tài)欄導(dǎo)航欄的做法。這時(shí)候需要底部留出一塊空白安全區(qū)域，頁面內(nèi)容最終的底線應(yīng)在手機(jī)拐角處。該安全區(qū)域的高度為。 由于iphoneX做了全面屏并且還保留一塊小劉海，因此很多以前的移動端H5頁面需要結(jié)合App客戶端做出相應(yīng)的適配，具體如下： 1、頂部通欄 之前的客戶...
摘要：由于做了全面屏并且還保留一塊小劉海，因此很多以前的移動端頁面需要結(jié)合客戶端做出相應(yīng)的適配，具體如下頂部通欄之前的客戶端一直采用狀態(tài)欄導(dǎo)航欄的做法。這時(shí)候需要底部留出一塊空白安全區(qū)域，頁面內(nèi)容最終的底線應(yīng)在手機(jī)拐角處。該安全區(qū)域的高度為。 由于iphoneX做了全面屏并且還保留一塊小劉海，因此很多以前的移動端H5頁面需要結(jié)合App客戶端做出相應(yīng)的適配，具體如下： 1、頂部通欄 之前的客戶...
摘要：由于做了全面屏并且還保留一塊小劉海，因此很多以前的移動端頁面需要結(jié)合客戶端做出相應(yīng)的適配，具體如下頂部通欄之前的客戶端一直采用狀態(tài)欄導(dǎo)航欄的做法。這時(shí)候需要底部留出一塊空白安全區(qū)域，頁面內(nèi)容最終的底線應(yīng)在手機(jī)拐角處。該安全區(qū)域的高度為。 由于iphoneX做了全面屏并且還保留一塊小劉海，因此很多以前的移動端H5頁面需要結(jié)合App客戶端做出相應(yīng)的適配，具體如下： 1、頂部通欄 之前的客戶...
閱讀 3490·2021-09-22 16:00
閱讀 3575·2021-09-07 10:26
閱讀 3153·2019-08-30 15:55
閱讀 2923·2019-08-30 13:48
閱讀 1418·2019-08-30 12:58
閱讀 2236·2019-08-30 11:15
閱讀 1033·2019-08-30 11:08
閱讀 622·2019-08-29 18:41
