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

没有.不同颜色的全角图片和全角div将被剪切

No. Full-width images and Full-width divs with different colors will be cut

在我的网站上，我使用

来添加背景图像或颜色，并在该部分中为内容添加一个 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{填充:0 0 常量(安全区域插入底部)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")) 如果是横向

您的网站是否使用谷歌地图将此添加到横向 $('#map_section').addClass("gm_iphoneX");

does your website use google maps Add this to landscape $('#map_section').addClass("gm_iphoneX");

类

  .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屋！