device-posture

Limited availability

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.

Tính năng media device-posture trong CSS có thể được dùng để phát hiện tư thế hiện tại của thiết bị, tức là liệu khung nhìn đang ở trạng thái phẳng (continuous) hay trạng thái gập (folded).

Cú pháp

Tính năng device-posture được chỉ định dưới dạng một giá trị từ khóa được chọn trong danh sách bên dưới:

continuous: Cho biết thiết bị đang ở trạng thái màn hình phẳng. Các thiết bị có thể gập sẽ ở trạng thái continuous khi chúng nằm phẳng — dù mở hoàn toàn hay đóng hoàn toàn. Các thiết bị không thể gập được coi là phẳng và do đó luôn ở trạng thái continuous — điều này bao gồm màn hình cong liền mạch và màn hình máy tính để bàn, laptop, máy tính bảng và điện thoại di động thông thường.
folded: Cho biết thiết bị đang ở trạng thái màn hình gập. Các thiết bị có thể gập sẽ ở trạng thái folded khi được sử dụng theo tư thế sách hoặc laptop.

Trong ví dụ này, tính năng media device-posture phát hiện khi thiết bị ở tư thế gập, thêm margin dựa trên orientation của nó để tạo khoảng cách lớn hơn giữa hai panel của ứng dụng nhằm dễ đọc hơn.

css

@media (device-posture: folded) and (orientation: landscape) {
  .list-view {
    margin-inline-end: 60px;
  }
}

@media (device-posture: folded) and (orientation: portrait) {
  .list-view {
    margin-block-end: 60px;
  }
}

Để xem đoạn code trên trong thực tế, hãy xem bản demo Device Posture API trên thiết bị có thể gập nếu có thể. Công cụ dành cho nhà phát triển trong trình duyệt hiện tại có thể mô phỏng các thiết bị có thể gập, nhưng không bao gồm mô phỏng thiết bị được gập một phần — chỉ có thiết bị mở hoàn toàn hoặc đóng hoàn toàn — vì vậy chúng sẽ luôn trả về continuous.