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à API liệt kê phân đoạn khung nhìn. Các API này được cung cấp dưới dạng bản dùng thử theo nguyên gốc từ 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 kiểm thử các API đó.

Chủ yếu có 2 kiểu dáng vật lý: thiết bị có màn hình linh hoạt (liền mạch) và thiết bị có 2 màn hình (có đường nối, còn được gọi là 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. Các chế độ cài đặt này cung cấp thêm những cách khác để khán giả có thể 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ị đó 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 có một kết hợp vật lý giữa các màn hình có thể cần được tính đến.

Những API mới này giú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 2 cách, 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 thực của thiết bị. Chúng 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, đồng thời các 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.

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 API Tư thế thiết bị xác định một tính năng đa phương tiện mới của CSS – vị trí 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. 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 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 đó về 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 các thay đổi về tư thế của thiết bị, chẳng hạn như người dùng mở hoàn toàn một thiết bị 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 xác định vị trí và kích thước của một khu vực khung nhìn được tách biệt một cách hợp lý. Các phân đoạn khung nhìn được tạo khi khung nhìn được phân chia theo 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 vùng của khung nhìn có thể được tác giả coi là phân biệt về mặt logic.

CSS

Số lượng phân chia 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 CSS cấp 5 về truy vấn nội dung đa phương tiện: vertical-viewport-segments và horizontal-viewport-segments. Chúng phân giải số lượng phân đoạn mà khung nhìn được tách ra.

Ngoài ra, các biến môi trường mới đã được thêm vào để truy vấn các chiều 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 chiều, lần lượt đại diện cho vị trí x và y trong lưới hai chiều được tạo bởi các tính năng phần cứng tách riêng 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 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ẳ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 (cột 1 và cột 2) ở mỗi bên của màn hình đầu tiên.

<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ố lượng 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 bằng một DOMArray mô tả toạ độ và kích thước. Trường segments là thông tin tổng quan nhanh của trạng thái đã cho khi được truy vấn, để nhận các giá trị cập nhật, 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

Các API có thể gập lại được cung cấp trong bản dùng thử theo nguyên gốc từ Chrome 125 đến Chrome 128. Hãy xem bài viết Làm quen với 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ờ các tính năng của 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 tính năng 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 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ị 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 giữa chế độ Liên tục và Gấp. Bạn cũng có thể xem 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 nhìn