js判断iPhone X，适配底部被小黑条遮挡问题

如果是iPhoneX等手机，底部有小黑条会遮挡底部的按钮

方法一：js判断，给底部加padding适配。

$(document).ready(function () {isIPhoneX();function isIPhoneX() {var u = navigator.userAgent;var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if (isIOS) {if (screen.height == 812 && screen.width == 375) {$('.menu_wkBox.back_box').css('padding-bottom', '0.5rem')} else if (screen.height == 896 && screen.width == 414) {$('.menu_wkBox.back_box').css('padding-bottom', '1rem')}}}
});// iPhone X、iPhone XS
var isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
// iPhone XS Max
var isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
// iPhone XR
var isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;

方法二：用css解决

meta：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">css：@supports (bottom: env(safe-area-inset-bottom)) {.menu_wkBox.back_box{padding-bottom: env(safe-area-inset-bottom);}
}

参考：js判断iPhone XS、iPhone XS Max、iPhone XR，之后的几点思考总结 | 西门的后花园 http://ons.me/574.html

js判断iPhone X，适配底部被小黑条遮挡问题相关推荐

解决iPhone部分机型下面有小黑条遮挡问题
.bottom {font-weight: 700;position: fixed;bottom: 0;width: 100%;min-height: 80rpx;background-color: ...
移动端js判断iPhone浏览器还是Android浏览器
js判断函数: //检测是Android的浏览器还是 iPhone的浏览器function checkNavigator () {var u = navigator.userAgent;var an ...
纯JS判断iPhone准确机型，iPhone6~iPhoneXs Max
工作中所用到的对于iPhone各类机型的准确识别, 亲测可用,现在分享一下: //iPhone 6/6s/7/8 let isIPhone6 = /iphone/gi.test(win ...
H5移动端网页适配iPhone x/iPhone xr/iPhone 11pro/iPhone 11/iPhone 12 机型底部小黑条
iPhone x/iPhone xr/iPhone 11pro/iPhone 11/iPhone 12 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部 ...
iphoneX底部小黑条适配问题
背景公司项目开发中,发现iPhoneX上吸底元素存在被小黑条遮挡的问题原因在苹果 iPhoneX .iPhone XR等机型上,物理Home键被取消,改为底部小黑条替代home键功能,从而导致吸 ...
html5苹果x底部满屏,iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配...
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 前言在苹果 iPho ...
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 本文目录前言 ...
javascriptjquery 判断滚动到页面底部
js 判断滚动到页面底部 CreateTime--2018年4月14日10:13:07 Author:Marydon 1.使用场景: 滚动到屏幕底部,触发加载分页数据请求(qq空间,手机端) 2.代码 ...
如何适配处理iphoneX底部的横条？(转)
iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条"Home Indicator".当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适 ...

js判断iPhone X，适配底部被小黑条遮挡问题

js判断iPhone X，适配底部被小黑条遮挡问题相关推荐

最新文章

热门文章