iPhone X의 Safari의 렌더링 범위를 조사해 보았다.

6326 단어 SafariiPhoneX
아무래도 네이티브측에는 Safe area적인 것이 있는 것 같지만, Web은 어떨까라고 조사해 보았다.

우선, 보통으로 웹 페이지를 표시했을 경우, 인물은 예상대로인데, 아무래도 랜드스케이프시는 좌우에 세이프 에리어분의 여백이 열리는 것 같다. 구체적인 거동을 조사하기 위해 다음과 같은 얕은 샘플을 준비했다.

기본적인 거동은?



index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div id="wrap-main">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem similique pariatur
    deserunt fugiat maxime? Quibusdam aliquam quasi omnis est nemo ex repellendus cupiditate
    culpa mollitia praesentium! Ad, vero deleniti. Modi.
</div>
<style>
    body,html {
        background-image:url(http://lorempixel.com/output/cats-q-c-1920-1920-3.jpg);
        background-size:cover;
        background-color:#000;
        margin: 0;padding: 0;
        height:200vh;
    }
    #wrap-main {
        width:100%;
        height: 100%;
        background-color:rgba(255,255,255,0.5);
    }
</style>
</body>
</html>



결과는 이렇게 이다. 간단히 말하면, 기본적으로 Safe area를 차감한 724px로서 window, body 모두 취급된다. 그건 그렇고, devicePixelRatio는 3입니다. 예외적으로 background-color만은 safe area에도 영향을 미친다. background-image에 대해서는 safe area내만의 렌더링으로 되는 모양.

safe area를 침범할 수 있습니까?



여러 가지 방법으로 시도했지만 결론부터 말하면 완전히는 아직 되어 있지 않다. 어떠한 수단이 준비될 것으로 예상되지만, 폭을 오버플로우 시키는 것으로 우측으로 돌출할 수 있었지만, 좌측에 대해서는 position:relative와 left에의 네가티브치에 의한 방법, translate, position:fixed, 네거티브 마진 모두 overflow:hidden이 걸려 있는 상태가 되어 버린다.
이것은 디폴트인 채로 있으면 확실히 그렇지만, 이 상태는 회피할 수 있는 것이 판명. 끝에 추가했습니다.


우선 할 수 있는 일



좌우에 background-color로 여백을 만들어 버린다는 것을 제대로 파악해 두는 정도 밖에 현상 없다. iPhone X를 의식한 모습을 생각하면 좀처럼 디자인이 어려워지는 예감.

safe area를 포함한 전체 화면을 다루고 싶은 경우



무지는 노출이라는 나의 정책을 관철한 결과, 친절한 캐나다 쪽이 나이스인 리플라이를 주었다. 당신이 신?

<meta name="viewport"content="viewport-fit=cover"> 👍 htps // t. 코 / ThCg7 A XpJd — Darryl Pogue (@dpogue) 2017년 9월 15일

그래서 언제나 버릇으로 meta : vp로 써 버리는 약속의 부분을 조금 수정해 보겠습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">



괜찮아요! ! ! ! ! ! ! ! ! !

뭐 이것은 이것으로 safe area를 고려하지 않으면 안됩니다만, 적어도 전체화면 사용할 수 없는 문제는 이것으로 해결. 그리고는 safe area의 취득 방법이 있으면 좋겠습니다만. 뭔가 없을까. 찾고 봐.

CSS에서의 방법은 발견.
#wrap-main {
        padding: 
            constant(safe-area-inset-top) 
            constant(safe-area-inset-right) 
            constant(safe-area-inset-bottom)
            constant(safe-area-inset-left);
    }


히아아아아! ! ! !

우헤아! ! ! !

그리고는 window.parent.screen 라든지 그 근처에서도 잡히지 않을까 했는데, 뭐 어딘가에 있을까... 뭐 이것도 또 발견하면 추기합니다.
iPhone의 Safari에서 열린 페이지를 웹 관리자에서 PC에서 디버깅하는 방법
iPhone X의 Safari에 나타나는 수수께끼의 공백을 지우는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage