듀얼 화면 축소 장치를 지원하는 CSS 미디어 쿼리

6572 단어 CSS
갤럭시폴드 시리즈와 서피스 두 시리즈 등이 등장해 앞으로 두 화면 접기 기기를 위한 웹 사이트와 웹 애플리케이션의 대응을 요구할 것으로 보인다.
브라우저의 대응도 조금씩 진행되고 있는 것 같아서 조사 내용을 정리해 봅시다.

듀얼 스크린 장치 감지를 위한 CSS 미디어 쿼리


최신 마이크로소프트 엣지(버전 96)의 시험적 구현이지만, 듀얼 화면 기기를 감지하는 뷰티 관리 컨설팅을 제공한다.
CSS
@media (horizontal-viewport-segments: <count>) { }
@media (vertical-viewport-segments: <count>) { }
4<count> 가로(가로) 또는 세로(세로) 화면 장치 수를 설정합니다.
예를 들어 Surface Doo의 2 화면 장치 디스플레이 값은 다음과 같습니다.
수준.horizontal-viewport-segments: 2수직시vertical-viewport-segments: 2

CSS 환경 변수


각 뷰 포트의 속성은 다음 환경 변수 정의를 통해 정의할 수 있습니다.
env(viewport-segment-width <x> <y>);
env(viewport-segment-height <x> <y>);
env(viewport-segment-top <x> <y>);
env(viewport-segment-left <x> <y>);
env(viewport-segment-bottom <x> <y>);
env(viewport-segment-right <x> <y>);
x 좌표와 y 좌표는 왼쪽 상단의 화면 장치가 00인 화면 장치의 좌표이다.
Surface Doo의 경우 다음 값을 사용하여 각 화면 장치의 좌표를 사용합니다.

이러한 값을 사용하여 각 화면 장치의 네 각도의 좌표, 너비 및 높이를 얻을 수 있습니다.

힌지 사이즈도 계산할 수 있어요.
/* 水平(横長)の時のヒンジの幅 */
calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0))
/* 垂直(縦長)の時のヒンジの高さ */
calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0))

사용 예


휴대용 전화에서 이미지와 텍스트는 수직으로 배열되어 있으며, 두 화면 장치에서 왼쪽의 장치에 텍스트를 표시하고, 오른쪽의 장치에 이미지의 레이아웃을 표시하는 경우

HTML
<body>
   <figure class="image">
      <img src="/image.jpg"alt="My image">
   </figure>
   <article class="article">
       ・・・
   </article>
</body>
CSS
/* 最大幅が 420px の一画面デバイスの時 */
@media (max-width: 420px) {
    ・・・
}

/* 二画面デバイスの水平(横長)の時  */
@media (horizontal-viewport-segments: 2) {
   .article {
       position: absolute;
       left: env(viewport-segment-left 0 0); /* 左側のデバイスに表示する */
       top: env(viewport-segment-top 0 0);
   }
   .image {
      width: env(viewport-segment-width 1 0); /* 右側のデバイスの幅の大きさで表示 */
      position: absolute;
      left: env(viewport-segment-left 1 0); /* 右側のデバイスに表示する*/
      top: env(viewport-segment-top 1 0);
   }
}

테스트


웹 브라우저에서 듀얼 화면 기기 표시에 대응하는 CSS를 테스트하기 위해 최신 버전의 데스크톱 버전의 Edge 또는 Chrome(devotools 에뮬레이터의 경우)를 다운로드합니다.edge://flags(또는chrome://flags) 기능 플래그를 활성화합니다.
[참조]
https://docs.microsoft.com/ja-jp/dual-screen/web/desktop-developer-tools

총결산


예상보다 간단하게 두 화면 장치에 대응하는 레이아웃을 설계했다.
정식 발매를 기대하다.
애플이 폴더블 아이폰을 개발 중이라는 소문이 돌면서 한발 앞선 인상을 줬다.

사이트 축소판 그림


https://docs.microsoft.com/ja-jp/dual-screen/web/css-viewport-segments
https://devblogs.microsoft.com/surface-duo/foldable-css-javascript-edge-96/
WSL2+Docker는 메모리를 절약할 수 있습니까
LeetCode#234 Palindrome Linked List

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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