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 dùng thử 2 API là Device Posture API (API Tư thế thiết bị) và Enumeration API (API Phân đoạn khung hiển thị) – được cung cấp dưới dạng bản dùng thử theo nguyên gốc của Chrome 125. Các API này được gọi chung là 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 các API này và cung cấp thông tin về cách bắt đầu kiểm thử chúng.

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

Bản vẽ sơ đồ một thiết bị có một màn hình linh hoạt duy nhất (liền mạch) ở bên trái và một thiết bị có hai màn hình (có đường may) ở bên phải.

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

Các API mới này cho phép nhà phát triển cung cấp trải nghiệm người dùng tốt hơn 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 theo hai cách, thông qua CSS và JavaScript.

API tư thế thiết bị

Thiết bị có thể gập lại có các chức năng cho phép thay đổi tư thế_của_chúng_hoặc trạng thái thực của thiết bị. Các API này có thể thay đổi hệ số hình dạng để cho phép tác giả nội dung cung cấp trải nghiệm người dùng khác. Những API mới này đảm bảo nội dung web có thể phản ứng với nhiều trạng thái gập.

Có 2 tư thế thiết bị mà một thiết bị có thể sử dụng:

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

Vẽ sơ đồ các thiết bị ở tư thế phẳng hoặc máy tính bảng và một 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.

Vẽ sơ đồ 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 (API Tư thế thiết bị) xác định một tính năng đa phương tiện CSS mới – device-posture. Tính năng nội dung đa phương tiện này phân giải thành một tập hợp các tư thế cố định. Các tư thế này bao gồm một số giá trị được xác định trước, mỗi giá trị bao gồm một trạng thái thực 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 đó về các tư thế có thể có:

folded
continuous

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

CSS

Số lượng bộ phận logic được hiển thị thông qua hai tính năng đa phương tiện 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. Các lớp này phân giải theo 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 kích thước của từng phép chia 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 chiều, đạ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ơ đồ minh hoạ các phân đoạn ngang và dọc. Đoạn ngang thứ nhất là x 0 và y 0, thứ hai x 1 và y 0. Đoạn thẳng đứng thứ nhất là x 0 và y 0, đoạn thứ hai x 0 và y 1. — Đoạn ngang đầu tiên 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ứ hai x 0 và y 1.

Đoạn mã sau đây là một ví dụ đơn giản về cách tạo trải nghiệm người dùng phân tách, trong đó chúng ta có hai phần nội dung (cột1 và col2) ở mỗi bên 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 cho thấy trải nghiệm trông như thế nào trên một thiết bị thực.

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

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

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

JavaScript

Để biết số lượng phân đoạn khung nhìn, hãy kiểm tra mục segments trong visualViewport.

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

Mỗi mục nhập 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. Trường segments là thông tin tổng quan nhanh về một trạng thái nhất định khi được truy vấn, để nhận được các giá trị cập nhật mà bạn cần theo dõi các thay đổi về tư thế hoặc đổ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 cung cấp trong bản dùng thử theo nguyên gốc của Chrome 125 cho đến Chrome 128. Xem bài viết Bắt đầu dùng bản dùng thử theo nguyên gốc để biết thông tin cơ bản về bản dùng thử theo nguyên gốc.

Để kiểm thử cục bộ, bạn có thể bật các API có thể gập lại bằng cờ tính năng Nền tảng web thử nghiệm tại chrome://flags/#enable-experimental-web-platform-features. Bạn cũng có thể bật trình duyệt này bằng cách chạy Chrome từ dòng lệnh bằng --enable-experimental-web-platform-features.

Bản thu thử

Để xem các bản minh hoạ, hãy xem kho lưu trữ bản minh hoạ. Nếu không có thiết bị thực để kiểm thử, bạn có thể chọn thiết bị được mô phỏng Galaxy Z Fold 5 hoặc Asus Zenbook Fold trong Công cụ của Chrome cho nhà phát triển và chuyển đổi giữa chế độ Liên tục và Đã gập. Bạn cũng có thể trực quan hoá bản lề (nếu có).

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 hiển thị