API Phân đoạn khung nhìn
Khả dụng hạn chế
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
API Phân đoạn khung nhìn cho phép các nhà phát triển truy cập vị trí và kích thước của các phân đoạn khung nhìn tách biệt về mặt logic bằng CSS và JavaScript. Phân đoạn khung nhìn được tạo ra khi khung nhìn bị chia cắt bởi một hoặc nhiều tính năng phần cứng như nếp gấp hoặc bản lề giữa các màn hình riêng biệt. Với API Phân đoạn khung nhìn, các nhà phát triển có thể tạo ra các thiết kế đáp ứng được tối ưu hóa cho các kích thước và cách bố trí phân đoạn khung nhìn khác nhau.
Khái niệm và cách sử dụng
Các thiết bị có nhiều màn hình được thiết kế để hoạt động như các phân đoạn khác nhau của cùng một bề mặt hiển thị (chẳng hạn điện thoại thông minh có màn hình gập hoặc bản lề) đặt ra một số thách thức thiết kế độc đáo cho các nhà phát triển. Bạn có thể tối ưu hóa bố cục cho màn hình như một thực thể duy nhất, nhưng làm thế nào để đảm bảo rằng các phần tử thiết kế khớp gọn gàng trên các phân đoạn khác nhau và không bị cắt làm đôi? Và làm thế nào để ngăn nội dung bị ẩn bởi nếp gấp/nối vật lý?
Điều quan trọng là biết liệu màn hình thiết bị của người dùng có nếp gấp hoặc nối hay không, các phân đoạn khác nhau có kích thước bao nhiêu, liệu chúng có cùng kích thước không, và hướng của các phân đoạn (liệu chúng xếp cạnh nhau hay trên-dưới). API Phân đoạn khung nhìn cho phép truy cập thông tin thiết bị phân đoạn của người dùng với các tính năng CSS và JavaScript cung cấp quyền truy cập vào vị trí và kích thước của mỗi phân đoạn khung nhìn trong một màn hình, bao gồm các tính năng @media để phát hiện các bố cục vùng nằm ngang và dọc khác nhau.
Để biết giải thích về cách API hoạt động, xem Sử dụng API Phân đoạn khung nhìn.
Giao diện
Viewport-
Đại diện cho khung nhìn của thiết bị. Cung cấp quyền truy cập thuộc tính
Viewport.segments, trả về mảng các đối tượngDOMRectđại diện cho vị trí và kích thước của mỗi phân đoạn khung nhìn trong màn hình phân đoạn.
Mở rộng các giao diện khác
Window.viewport-
Trả về một phiên bản đối tượng
Viewport, cung cấp thông tin về trạng thái hiện tại của khung nhìn thiết bị.
Tính năng CSS
- Tính năng
@mediahorizontal-viewport-segments -
Phát hiện xem thiết bị có số lượng phân đoạn khung nhìn được bố trí theo chiều ngang hay không.
- Tính năng
@mediavertical-viewport-segments -
Phát hiện xem thiết bị có số lượng phân đoạn khung nhìn được bố trí theo chiều dọc hay không.
- Biến môi trường phân đoạn khung nhìn
-
Các biến môi trường này cung cấp quyền truy cập vào tọa độ cạnh và kích thước của mỗi phân đoạn khung nhìn.
Ví dụ
Bạn có thể tìm thấy một ví dụ hoàn chỉnh trình bày cách sử dụng các tính năng trên trong bản demo API Phân đoạn khung nhìn.
Nếu có thể, bạn nên xem bản demo trên thiết bị gập được. Công cụ phát triển trình duyệt hiện tại cho phép giả lập thiết bị gập được, nhưng không bao gồm giả lập các phân đoạn vật lý khác nhau.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Viewport Module Level 1 # dom-viewport-segments |
Tương thích trình duyệt
Xem thêm
- Sử dụng API Phân đoạn khung nhìn
- API CSSOM view
- API Tư thế thiết bị
- Mô-đun biến môi trường CSS
- Origin trial for Foldable APIs via developer.chrome.com (2024)