javascript – iPhone X网站安全区域

2019-06-11 06:21:00 阅读：276 来源： 互联网

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

iPhone X横向默认安全区域和陷阱解决方案.

我添加了这个问题,以帮助其他人避免头痛我试图修复我的网站在新的iPhone 10上

基本上,问题是白条

解决方法:

解决方案是使用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

 .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”))如果是风景

你的网站是否使用谷歌地图
将其添加到landscape $(‘#map_section’).addClass(“gm_iphoneX”);

类

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

  }

如果有更好的方法,或者我错过了一些告诉我
谢谢

标签：jquery,javascript,css,meta-tags,responsive-design
来源： https://codeday.me/bug/20190611/1216877.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – iPhone X网站安全区域