Javascript iPhoneX网站安全区

iPhoneX横向默认安全区域和缺口解决方案

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

---

基本上，问题是白色条

解决方案是使用

视口拟合=覆盖

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

并将其添加到网站包装器中并完成？对

否。将剪切具有不同颜色的全宽图像和全宽div

在我的网站上，我使用

添加背景图像或颜色，并在内容部分添加一个div，因此我在div上添加了

.iphoneX

，而不是网站包装上的

.iphoneX\u rl

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

左右两边都有，底部呢

.iphoneX_页脚{ 填充：0 0常数（安全区域插入底部）0
}

将此添加到页脚的最后一个div（容器）

现在我的网站在iPhoneX/10上看起来不错，看看我的网站在iPhone8上的内容会变得边缘化吗？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_部分”）.addClass（“gm#u iphoneX”）

阶级

如果有更好的方法，或者我错过了什么，告诉我
感谢
注意：在iOS UIWebView中，screen.availHeight等于768。
在iOS WKWebView中，screen.availHeight始终为812。
@Krunal网站安全区域，而不是iOS应用程序，谢谢你的帮助comment@Krunal这是一个如何使用
meta
content=
viewport-fit=cover
的示例，请不要删除meta我不确定这是否与javascript相关？抱歉，我以为这是您提到的苹果API
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");
    }

  }

}

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

  }