Trang này được dịch bởi Cloud Translation API.

Bản dùng thử theo nguyên gốc của API có thể gập lại

Alexis Menard

Thomas Steiner

Chrome đang thử nghiệm 2 API: API tư thế thiết bị và Phân đoạn khung nhìn Enumeration API được cung cấp dưới dạng bản dùng thử theo nguyên gốc trên Chrome 125. Các API này được gọi chung là các API có thể gập lại, được thiết kế để giúp nhà phát triển nhắm đến các thiết bị có thể gập lại. Bài đăng này giới thiệu về các API này, và cung cấp thông tin về cách bắt đầu thử nghiệm các quảng cáo đó.

Chủ yếu có hai kiểu dáng vật lý khác nhau: các thiết bị có một màn hình linh hoạt (liền mạch) và các thiết bị có hai màn hình (có đường nối, còn được gọi là làm thiết bị màn hình đôi).

Bản vẽ sơ đồ về một thiết bị có một màn hình linh hoạt (liền mạch) ở bên trái và một thiết bị có hai màn hình (có đường nối, còn gọi là màn hình kép) ở bên phải.

Những thiết bị này đặt ra nhiều thách thức và cơ hội cho các nhà phát triển. Chúng mang lại những cách khác để xem nội dung. Ví dụ: người dùng có thể giữ một một thiết bị liền mạch như một cuốn sách, rồi chuyển sang sử dụng thiết bị đó như một máy tính bảng màn hình phẳng. Thiết bị có hai màn hình có một điểm nối vật lý giữa các màn hình mà có thể cần được tính đến.

Những API mới này giúp nhà phát triển mang đến trải nghiệm tốt hơn cho người dùng cho các thiết bị này. Mỗi API hiển thị các dữ liệu gốc cần thiết của nền tảng web trong hai thông qua CSS và JavaScript.

API Tư thế thiết bị

Thiết bị có thể gập lại có tính năng cho phép thay đổi tư thế_, hoặc trạng thái vật lý của thiết bị. Họ có thể thay đổi kiểu dáng cho phép tác giả nội dung để cung cấp trải nghiệm người dùng khác, đồng thời các API mới này giúp đảm bảo nội dung web có thể phản ứng với các trạng thái gập khác nhau.

Thiết bị có thể ở 2 tư thế:

folded: Tư thế máy tính xách tay hoặc sách.

Bản vẽ sơ đồ thể hiện các thiết bị ở tư thế phẳng hoặc máy tính bảng và màn hình cong liền mạch.

continuous: Màn hình phẳng, máy tính bảng hoặc thậm chí là màn hình cong liền mạch.

Bản vẽ giản đồ về các thiết bị ở tư thế máy tính xách tay hoặc sách.

CSS

Thông số kỹ thuật của Device Posture API xác định một CSS mới media-feature-device-cap (tư thế thiết bị). Tính năng đa phương tiện này chuyển sang một nhóm các tư thế cố định. Những tư thế này bao gồm của một số giá trị được xác định trước, mỗi giá trị bao gồm một trạng thái vật lý của thiết bị.

Giá trị của tính năng device-posture khớp với nội dung mô tả trước đó của các tư thế có thể có:

folded
continuous

Các kiểu tư thế mới có thể được bổ sung trong tương lai nếu có thiết bị mới xuất hiện trên thị trường.

Ví dụ:

/* 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) { ... }

JavaScript

Để truy vấn tư thế của thiết bị, đã có một đối tượng DevicePosture mới.

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

Để phản ứng với những thay đổi về tư thế của thiết bị, chẳng hạn như người dùng mở thiết bị hoàn toàn và do đó, chuyển từ folded sang continuous, hãy đăng ký các sự kiện change.

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

API phân đoạn khung nhìn

Phân đoạn khung nhìn là các biến môi trường CSS giúp xác định vị trí và kích thước của khu vực tách biệt về mặt logic của khung nhìn. Phân đoạn khung nhìn là được tạo khi khung nhìn được phân tách bởi một hoặc nhiều tính năng phần cứng (chẳng hạn như nếp gấp hoặc là bản lề giữa các màn hình riêng biệt) đóng vai trò như một dải phân cách. Các phân đoạn là các vùng của khung nhìn có thể được coi là phân biệt về mặt logic theo tác giả.

CSS

Số lượng phân chia logic được hiển thị thông qua hai tính năng truyền thông mới, được xác định trong thông số kỹ thuật Truy vấn phương tiện CSS cấp 5: vertical-viewport-segments và horizontal-viewport-segments. Họ phân giải thành số lượng phân đoạn mà khung nhìn được chia nhỏ.

Ngoài ra, các biến môi trường mới đã được thêm vào để truy vấn các phương diện của từng phần logic. Các biến này là:

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)

Mỗi biến có hai phương diện, đại diện cho vị trí x và y, tương ứng, trong lưới hai chiều được tạo bởi các tính năng phần cứng phân tách các phân đoạn.

Sơ đồ cho thấy các phân đoạn ngang và dọc. Đoạn ngang thứ nhất là x 0 và y 0, đoạn thứ hai x 1 và y 0. Đoạn thẳng đứng thứ nhất là x 0 và y 0, đoạn thẳng thứ hai x 0 và y 1. — Đoạn thẳng nằm ngang thứ nhất là x 0 và y 0, đoạn thứ hai x 1 và y 0. Đoạn thẳng đứng thứ nhất là x 0 và y 0, đoạn thẳng thứ hai x 0 và y 1.

Đoạn mã sau đây là một ví dụ đơn giản về cách tạo một trải nghiệm người dùng phân tách, trong đó chúng ta có hai phần nội dung (col1 và col2) ở mỗi bên của nếp gấp.

<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>

Các ảnh sau đây minh hoạ trải nghiệm trên thiết bị thực.

Điện thoại có thể gập lại ở tư thế sách dọc.

Điện thoại có thể gập lại ở tư thế sách ngang.

Máy tính bảng có thể gập lại ở tư thế sách nằm ngang.

JavaScript

Để biết số phân đoạn trong khung nhìn, hãy xem mục segments trong visualViewport

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

Mỗi mục trong mảng segments đại diện cho từng phân đoạn logic của khung nhìn có DOMArray mô tả toạ độ và kích thước. segments là ảnh chụp nhanh của trạng thái đã cho khi được truy vấn để nhận thông tin cập nhật các giá trị bạn cần để theo dõi các thay đổi về tư thế hoặc thay đổi kích thước sự kiện và truy vấn lại Thuộc tính segments.

Dùng thử các API có thể gập lại

API có thể gập lại có trong bản dùng thử theo nguyên gốc từ Chrome 125 đến Chrome 128. Xem Làm quen với bản dùng thử theo nguyên gốc để biết thông tin cơ bản về các bản dùng thử theo nguyên gốc.

Để thử nghiệm cục bộ, bạn có thể bật API có thể gập lại bằng Web thử nghiệm Gắn cờ các tính năng của nền tảng lúc chrome://flags/#enable-experimental-web-platform-features. Cũng có thể được bật bằng cách chạy Chrome từ dòng lệnh bằng --enable-experimental-web-platform-features.

Bản thu thử

Để có bản minh hoạ, hãy xem các bản minh hoạ kho lưu trữ. Nếu bạn không có thiết bị thực để thử nghiệm, bạn có thể chọn Galaxy Z Fold 5 hoặc Asus Thiết bị được mô phỏng Zenbook Fold trong Công cụ của Chrome cho nhà phát triển và lật giữa Liên tục và Gấp. Bạn cũng có thể hình dung bản lề khi có thể áp dụng.

Công cụ của Chrome cho nhà phát triển mô phỏng một thiết bị có thể gập lại.

Đường liên kết có liên quan

API Tư thế thiết bị
API Phân đoạn khung nhìn