iPhone X의 Safari에 나타나는 수수께끼의 공백을 지우는 방법
iPhoneX 사파리에서는 가로로 갈 때
기본적으로 양쪽에 흰색 막대가 표시되는 사양으로되어있는 것 같습니다. ↓
viewport-fit=cover를 지정하자! !
그럼 화면 전체를 가리는 레이아웃을 만들고 싶을 때는 어떻게 하면 좋을까.
Stephen Radford의 기술 블로그 에 의하면, <meta> 에 viewport-fit=cover 를 지정하면 좋다고 한다.
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
↑잘 보면 오른쪽의 컨텐츠가 스테이터스 바에 쓰고 있습니다.
ios11부터는 Safe Area( 자세한 내용은 여기 )라는 개념이 채용되고 있어
다음과 같이 CSS에서 공백을 지정하면 해결됩니다.
// 右側の空白
padding: constant(safe-area-inset-right);
// 下側の空白
padding: constant(safe-area-inset-bottom);
// 左側の空白
padding: constant(safe-area-inset-left);
// 上側の空白
padding: constant(safe-area-inset-top);
Reference
이 문제에 관하여(iPhone X의 Safari에 나타나는 수수께끼의 공백을 지우는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/daisukeoda/items/2b8cc28f176e202976b7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
// 右側の空白
padding: constant(safe-area-inset-right);
// 下側の空白
padding: constant(safe-area-inset-bottom);
// 左側の空白
padding: constant(safe-area-inset-left);
// 上側の空白
padding: constant(safe-area-inset-top);
Reference
이 문제에 관하여(iPhone X의 Safari에 나타나는 수수께끼의 공백을 지우는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/daisukeoda/items/2b8cc28f176e202976b7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
