iPhone X网站安全区
iPhone X横向默认安全区域和陷阱解决方案。
我添加了这个问题，以帮助其他人避免头痛我试图在新的iPhone 10上修复我的网站
基本上，问题是白条
解决方案是使用viewport-fit=cover
这将使用全屏，但缺口怎么样。
创建一个类
.iphoneX{ padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); }
并将其添加到网站包装并完成？ 是
不会。将切割全宽图像和不同颜色的全宽div
在我的网站上，我使用
添加背景图片或颜色，并在内容的部分添加div，所以在网站包装上代替.iphoneX ，我在div上添加.iphoneX_rl
.iphoneX_rl{ padding: 0 constant(safe-area-inset-right) 0 constant(safe-area-inset-left); }
这样可以处理正确的问题并留下底部的问题
.iphoneX_footer {padding：0 0 constant（safe-area-inset-bottom）0
}
将此添加到页脚中的最后一个div（容器）
现在我的网站在iPhone X / 10上看起来不错，看着我的网站上的iPhone 8内容走向了优势？ 没有js / jquery的安全区域时间
if (navigator.userAgent.match(/(iPhone)/)){ if((screen.availHeight == 812) && (screen.availWidth == 375)){ if((window.innerHeight == "375") && (window.innerWidth == "812")){ $('.someClass,.someClass,.someClass').addClass("iphoneX_rl"); alert("ok iphone X - L"); }else{ $('.someClass,.someClass,.someClass').removeClass("iphoneX_rl"); alert("ok iphone X - P"); } } }
navigator.userAgent.match(/(iPhone)/)如果有任何iPhone
(screen.availHeight == 812) && (screen.availWidth == 375)如果iPhone 10
((window.innerHeight == "375") && (window.innerWidth == "812"))如果是风景
您的网站是否使用谷歌地图将此添加到横向$('#map_section').addClass("gm_iphoneX");
类
.gm_iphoneX div.gmnoprint{ margin-right: 40px !important; }
如果有更好的方法，或者我错过了一些东西告诉我，谢谢
注意：在iOS UIWebView中，screen.availHeight等于768.在iOS WKWebView中，screen.availHeight始终为812。