iPhone X网站安全区 [英] iPhone X website safe area
问题描述
iPhone X横向默认安全区域和缺口解决方案。
The iPhone X landscape default safe area and notch solution.
我添加此问题以帮助其他人避免头痛我试图在新iPhone上修复我的网站10
I added this Question to help others avoid a headache I head trying to fix my website on the new iPhone 10
基本上,问题是白条
推荐答案
解决方案是使用 viewport-fit = cover
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
这将使用全屏,但缺口是什么。
This will use the full screen but what about the notch.
创建一个类
.iphoneX{
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
}
并将其添加到网站包装并完成?是的
and add it to the website wrapper and done? Yes
没有。在我的网站上,我将使用< section> $ c切割全宽图像和不同颜色的全角div。
No. Full-width images and Full-width divs with different colors will be cut
$ c>添加背景图片或颜色,并在内容的部分添加div,所以在网站包装器上添加而不是
.iphoneX
div上的.iphoneX_rl
on my website, I use <section>
to add background images or colors and add a div in the section for the content, so instead of .iphoneX
on the website wrapper, i added .iphoneX_rl
on the div
.iphoneX_rl{
padding: 0 constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
}
这会照顾右边和左边的底部
That takes care of the right and left what about the bottom
.iphoneX_footer {
padding:0 0 constant(safe-area-inset-bottom)0
}
.iphoneX_footer{
padding: 0 0 constant(safe-area-inset-bottom) 0
}
将此添加到页脚中的最后一个div(容器)
add this to -the last div ( container) in your footer
现在我的网站在iPhone X / 10上看起来不错,查看我的网站iPhone 8的内容走向了优势?没有js / jquery的安全区域时间
now my website looks good on iPhone X/10, looking at my website on the iPhone 8 content goes to the edge? no safe area time for 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
navigator.userAgent.match(/(iPhone)/)
if any iPhone
(screen.availHeight == 812)&& (screen.availWidth == 375)
如果iPhone 10
(screen.availHeight == 812) && (screen.availWidth == 375)
if iPhone 10
((window.innerHeight ==375) &&(window.innerWidth ==812))
if landscape
((window.innerHeight == "375") && (window.innerWidth == "812"))
if landscape
您的网站是否使用谷歌地图
添加这是横向 $('#map_section')。addClass(gm_iphoneX);
does your website use google maps
Add this to landscape $('#map_section').addClass("gm_iphoneX");
class
.gm_iphoneX div.gmnoprint{
margin-right: 40px !important;
}
如果有更好的方法,或者我错过的东西告诉我
谢谢
if there is a better way to do it, or I missed something tell me THANKS
这篇关于iPhone X网站安全区的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!