Hỗ trợ thiết bị có thể gập lại bằng Viewport Segments API

Alexis Menard

Xuất bản: Ngày 9 tháng 6 năm 2025

Viewport Segments API cung cấp quyền truy cập vào vị trí và kích thước của một vùng riêng biệt về mặt logic của khung nhìn bằng JavaScript hoặc CSS, đồng thời có sẵn từ Chrome 138.

Các phân đoạn khung hiển thị được tạo khi khung hiển thị bị chia 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 bản lề giữa các màn hình riêng biệt) đóng vai trò là đường phân chia.

Phân đoạn là các vùng của khung hiển thị mà bạn có thể coi là khác biệt về mặt logic khi phát triển trang web hoặc ứng dụng. Các API thú vị này cho phép bạn tạo hoặc tối ưu hoá giao diện dành riêng cho thiết bị có thể gập lại. Ví dụ: tạo trải nghiệm người dùng có hai ngăn hoặc chỉ cần tránh bố cục nội dung trên phần hiển thị đầu tiên.

Kể từ thử nghiệm nguồn mà chúng tôi đã chạy vào năm ngoái, đã có 2 thay đổi:

• Thuộc tính JavaScript segments hiện nằm trong đối tượng window.viewport mới thêm thay vì window.visualViewport.
• Hành vi của thuộc tính segments khi thiết bị không gập lại đã được điều chỉnh cho phù hợp với hành vi CSS của tính năng này. Khi thiết bị không gập (hoặc không gập được), thuộc tính segments sẽ chứa một mảng gồm một đoạn duy nhất đại diện cho toàn bộ kích thước khung hiển thị.

Hãy xem các bản minh hoạ về thiết bị có thể gập lại để xem API này hoạt động!