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.
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.
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.
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.
Đ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.
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ó).
Đường liên kết có liên quan
- API tư thế thiết bị
- API Phân đoạn khung hiển thị