iPhone X 网站安全区答案

【问题标题】：iPhone X website safe areaiPhone X 网站安全区
【发布时间】：2018-03-03 10:06:28
【问题描述】：

iPhone X 横屏默认安全区域和缺口解决方案。

我添加此问题是为了帮助其他人避免我在尝试在新 iPhone 10 上修复我的网站时头疼的问题

基本上，问题是白条

【问题讨论】：

@Krunal 网站安全区域，而不是 ios 应用程序，感谢您的评论
@Krunal 这是一个如何使用meta content=viewport-fit=cover 的例子，所以请不要删除meta

标签： javascript jquery css responsive-design meta-tags

【解决方案1】：

注意：在 iOS UIWebView 中，screen.availHeight 等于 768。在 iOS WKWebView 中，screen.availHeight 始终为 812。

【讨论】：

我不确定这与javascript有关吗？
抱歉，您指的是 Apple API

【解决方案2】：

解决方法是使用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_rl，而不是在网站包装器上添加了.iphoneX_rl

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

那个照顾左右呢，底部呢

.iphoneX_footer{ 填充：0 0 常量（安全区域插入底部）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; 

  }

如果有更好的方法，或者我错过了什么，请告诉我谢谢

【讨论】：