폴더블 API의 오리진 트라이얼

Alexis Menard

Thomas Steiner

Chrome은 Device Posture API와 Viewport Segments라는 두 가지 API를 무료 체험하고 있습니다. Chrome에서 오리진 트라이얼로 제공되는 Enumeration API 125입니다. 통칭하여 폴더블 API라고 하며 폴더블 기기를 타겟팅해야 합니다 이 게시물에서는 이러한 API를 소개하고 는 테스트를 시작하는 방법에 대한 정보를 제공합니다.

주로 두 가지 다른 물리적 폼 팩터가 있습니다. 유연한 화면 (매끄러운 화면) 및 두 개의 화면이 있는 기기 (솔기 삽입, 듀얼 화면 기기)

이러한 기기는 개발자에게 도전과제와 기회를 제공합니다. 제공 서비스 다양한 방식으로 콘텐츠를 제공합니다 예를 들어 사용자가 태블릿처럼 매끄럽게 사용할 수 있도록 하기 위해 평면 화면입니다. 두 개의 화면이 있는 기기의 경우 화면 사이에 물리적 연결이 있습니다. 고려해야 할 수도 있습니다

개발자는 이 새로운 API를 통해 더 나은 사용자 환경을 제공할 수 있습니다. 지원하고자 합니다. 각 API는 필요한 웹 플랫폼 프리미티브를 CSS와 JavaScript를 통해 가능합니다.

기기 Posture API

폴더블 기기에는 _상태_ 또는 정의합니다. 폼 팩터를 변경하여 다양한 사용자 환경을 제공할 수 있으며, 이러한 새 API를 사용하면 웹 콘텐츠가 다양한 접기 상태에 반응할 수 있도록 합니다.

기기는 다음과 같은 두 가지 기기 상태에 있을 수 있습니다.

• folded: 노트북 또는 도서 상태입니다.

• continuous: 평평한 화면, 태블릿은 물론 매끄러운 곡선형 디스플레이를 지원합니다.

CSS

Device Posture API 사양은 새로운 CSS를 정의합니다. media-feature: device-posture를 사용하세요. 이 미디어 기능은 일련의 고정된 상태로 확인됩니다. 이러한 상태는 미리 정의된 여러 개의 값으로 구성된 특정 레이어의 물리적 상태를 있습니다.

device-posture 특성의 값은 가능한 상황:

• folded
• continuous

향후 새로운 기기가 출시되면 새로운 상태도 추가될 수 있습니다.

예:

/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }

/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }

자바스크립트

기기의 상태를 쿼리하기 위해 새 DevicePosture 객체를 사용할 수 있습니다.

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

사용자가 기기를 완전히 열고 따라서 folded에서 continuous로 이동하여 change 이벤트를 구독합니다.

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

표시 영역 세그먼트 API

표시 영역 세그먼트는 광고의 위치와 치수도 있습니다. 표시 영역 세그먼트: 표시 영역이 하나 이상의 하드웨어 기능 (예: 별도의 디스플레이 사이에 접히거나 힌지)을 떨어뜨려 보세요. 세그먼트는 경계선에 의해 논리적으로 구분되는 것으로 취급할 수 있는 표시 영역 및 있습니다.

CSS

논리적 분할의 수는 두 개의 새로운 미디어 기능을 통해 노출됩니다. CSS 미디어 쿼리 레벨 5 사양에 정의되어 있습니다. vertical-viewport-segments 및 horizontal-viewport-segments 그들은 표시 영역이 분할되는 세그먼트의 개수입니다.

또한 새 환경 변수가 추가되어 구분할 수 있습니다 이러한 변수는 다음과 같습니다.

• 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 위치를 나타내는 두 개의 차원이 있습니다. 인코더-디코더에 의해 생성된 2차원 그리드에서 세그먼트를 분리할 때 유용합니다.

</ph> <ph type="x-smartling-placeholder">

다음 코드 스니펫은 분할 UX를 만드는 간단한 예시입니다. 스크롤 없이 볼 수 있는 부분에 두 개의 콘텐츠 섹션 (col1과 col2)이 있습니다.

<style>
  /* Segments are laid out horizontally. */
  @media (horizontal-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: row;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-right 0 0);
      background-color: steelblue;
    }

    #fold {
      width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
      background-color: black;
      height: 100%;
    }

    #col2 {
      display: flex;
      background-color: green;
    }
  }

  /* Segments are laid out vertically. */
  @media (vertical-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: column;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-bottom 0 0);
      background-color: pink;
    }

    #fold {
      width: 100%;
      height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
      background-color: black;
    }

    #col2 {
      display: flex;
     background-color: seagreen;
    }
  }
</style>

<div id="segment-css-container">
   <div id="col1"></div>
   <div id="fold"></div>
   <div id="col2"></div>
 </div>

다음 사진은 실제 기기에서 어떻게 표시되는지 보여줍니다.

자바스크립트

표시 영역 세그먼트의 수를 가져오려면 segments 항목을 확인합니다. visualViewport입니다.

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

segments 배열의 각 항목은 좌표와 크기를 설명하는 DOMArray가 포함된 표시 영역 segments 필드는 쿼리될 때 업데이트된 데이터를 수신하기 위해 지정된 상태의 스냅샷입니다. 상태 변경을 수신 대기하거나 이벤트의 크기를 조절하고 segments 속성입니다.

폴더블 API 사용해 보기

폴더블 API는 오리진 트라이얼 Chrome 125부터 Chrome 128까지 업데이트되었습니다 자세한 내용은 오리진 트라이얼 시작하기 참조하세요.

로컬 테스트의 경우 실험용 웹을 사용하여 폴더블 API를 사용 설정할 수 있습니다. 플랫폼 기능 플래그: chrome://flags/#enable-experimental-web-platform-features 또한 명령줄에서 Chrome을 실행하고 --enable-experimental-web-platform-features

데모

데모를 보려면 데모 저장소를 사용합니다. 계정이 없는 경우 Galaxy Z Fold 5 또는 Asus를 선택할 수 있습니다. Zenbook Fold가 Chrome DevTools에서 에뮬레이션된 기기와 연속 및 접힘. 또한 힌지를 시각화할 수도 있습니다. 있습니다.

관련 링크

• Device Posture API <ph type="x-smartling-placeholder">
  </ph>
  • Mozilla 위치
  • WebKit 위치
  • Chrome 상태 항목
  • W3C 사양
• 표시 영역 세그먼트 API <ph type="x-smartling-placeholder">
  </ph>
  • Mozilla 위치
  • WebKit 위치
  • Chrome 상태 항목
  • W3C CSS 미디어 쿼리 사양 및 W3C CSS 환경 변수 사양