iPhone X网站安全区

iPhone X风景默认安全区域和缺口解决方案。iPhone X网站安全区

我加了这个问题，帮助他人避免头疼我脑袋试图解决我的网站上新的iPhone 10

基本上，问题是白条

2017-09-21 Moaz Mabrok

@Krunal安全区的网站，而不是ios应用程序，感谢您的评论 –

@Krunal这是一个如何使用'meta' content ='viewport-fit = cover'如此友善的例子不要删除meta –

的解决方案是使用viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1.0, 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会在我的网站被切断

，我用<section>添加背景图像或颜色，并在部分中添加一个div的内容，所以不是.iphoneX网站上的包装，我就在div

.iphoneX_rl{ 
    padding: 0 constant(safe-area-inset-right) 0 constant(safe-area-inset-left); 
}

这需要的正确的护理添加.iphoneX_rl留下怎么样的底部

.iphoneX_footer { 填充：0 0常数（安全区 - 内陷式底部）0
}

这在你的页脚添加到-The最后一个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");

class

.gm_iphoneX div.gmnoprint{ 
    margin-right: 40px !important; 

    }

，如果有更好的方式来做到这一点，或者我错过了什么告诉我 THANKS

来源

2017-09-21 22:55:52

https://stackoverflow.com/questions/2934269/google-maps-api-v3-custom-controls-position –

https：//www.designernews。co/stories/87581-another-solution-for-iphone-x-scrolling-by-embracing-the-notch –

http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone- x/ –

注：在iOS中的UIWebView中，screen.availHeight等于768 在iOS系统WKWebView中， screen.availHeight总是812.

来源

2017-11-09 04:53:10 lincolnge

我不确定这与JavaScript有关吗？ –

https://developer.mozilla.org/en-US/docs/Web/API/Screen/availHeight – lincolnge

对不起，以为这是你所指的Apple API –

iPhone X网站安全区

回答

相关问题