viewport-segments 미디어쿼리

요즘 2개의 디스플레이 화면을 제공하는 스마트폰들이 출시되고 있는데요,

이런 디바이스의 화면을 펼쳤는지 접었는지에 대한 구분은 어떻게 할 수 있을까?

그 해답은 viewport-segments 에서 찾을 수 있습니다.

@media (horizontal-viewport-segments: <count>) { }
@media (vertical-viewport-segments: <count>) { }

<count>의 값으로는 디스플레이의 갯수가 들어갑니다.

예를 들어 Galaxy Flip의 경우 가로보기, 세로보기에 따라 아래처럼 사용할 수 있습니다.

body {
  background-color: yellow;
}

@media (horizontal-viewport-segments: 2) {
   /* 가로보기일 경우 */
	body {
	      background-color: green;
	   }
}
@media (vertical-viewport-segments: 2) {
   /* 세로보기일 경우 */
	body {
      background-color: blue;
   }
}

위의 예시에서, 기본적으로 배경색은 노란색을 가지게 됩니다. 하지만 모바일 기기의 화면을 펼쳐서 가로로 본다면, 배경색은 녹색으로. 세로로 본다면 배경색은 파란색으로 바뀌게 됩니다.

Example Image

— 지원브라우저 : Edge 버전 97이상 출처

Nizbridge

viewport-segments 미디어쿼리

Related Posts