Cấu hình màn hình

Thiết kế web đáp ứng là sự phản ứng với điện thoại di động theo nhiều cách. Trước khi điện thoại thông minh xuất hiện, rất ít người nghiêm túc cân nhắc giao diện của trang web trên thiết bị cầm tay. Điều đó đã thay đổi cùng với sự gia tăng chóng mặt của điện thoại di động có trình duyệt web tích hợp.

Thiết kế web đáp ứng khuyến khích tư duy đặt câu hỏi cho các giả định. Nếu trước đây mọi người thường cho rằng một trang web chỉ được xem trên máy tính, thì giờ đây, bạn nên thiết kế cùng một trang web cho điện thoại và máy tính bảng. Trên thực tế, việc sử dụng thiết bị di động hiện đã vượt quá mức sử dụng máy tính trên web.

Tư duy phản hồi nhanh này sẽ phục vụ bạn tốt trong tương lai. Hoàn toàn có khả năng trang web của bạn sẽ được xem trên các thiết bị và màn hình mà chúng ta thậm chí không thể hình dung ra ngày nay. Tư duy này không chỉ áp dụng cho màn hình. Ngay cả bây giờ, mọi người vẫn sử dụng các thiết bị không có màn hình để truy cập vào nội dung của bạn. Trợ lý thoại có thể sử dụng trang web của bạn nếu bạn đang sử dụng một nền tảng HTML ngữ nghĩa vững chắc.

Thế giới màn hình cũng có hoạt động thử nghiệm. Hiện nay, trên thị trường có nhiều thiết bị có màn hình có thể gập lại. Việc này mang đến một số thách thức cho các thiết kế của bạn.

Màn hình đôi

Người dùng thiết bị có thể gập lại có thể chọn xem họ muốn trình duyệt web chỉ chiếm một trong các màn hình hay trải rộng trên cả hai màn hình. Nếu trình duyệt trải dài trên cả hai màn hình, thì trang web trên màn hình sẽ bị chia tách bởi bản lề giữa hai màn hình. trông không ổn lắm.

Phân đoạn khung nhìn

Có một tính năng phương tiện thử nghiệm được thiết kế để phát hiện xem trang web của bạn có đang hiển thị trên thiết bị màn hình đôi hay không. Tên đề xuất của tính năng đa phương tiện là viewport-segments. Có hai biến thể: horizontal-viewport-segments và vertical-viewport-segments.

Nếu tính năng đa phương tiện horizontal-viewport-segments báo cáo giá trị 2 và vertical-viewport-segments báo cáo giá trị 1, thì tức là bản lề trên thiết bị chạy từ trên xuống dưới, sẽ chia nội dung của bạn thành hai bảng điều khiển cạnh nhau.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

Nếu tính năng đa phương tiện vertical-viewport-segments báo cáo giá trị 2 và horizontal-viewport-segments báo cáo giá trị 1, thì bản lề sẽ chạy từ bên này sang bên kia, chia nội dung của bạn thành hai bảng, một bảng chồng lên nhau.

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

Nếu cả vertical-viewport-segments và horizontal-viewport-segments đều báo cáo giá trị 1, thì tức là trang web chỉ được hiển thị trên một màn hình, ngay cả khi thiết bị có nhiều màn hình. Điều này tương đương với việc không sử dụng bất kỳ truy vấn phương tiện nào.

Biến môi trường

Bản thân tính năng đa phương tiện viewport-segments sẽ không giúp bạn thiết kế bản lề gây khó chịu đó. Bạn cần có cách để biết kích thước của bản lề. Đó là lúc các biến môi trường có thể giúp ích.

Các biến môi trường trong CSS cho phép bạn đưa các trường hợp xâm nhập thiết bị gây khó chịu vào kiểu của mình. Ví dụ: bạn có thể thiết kế xung quanh "notch" trên iPhone X bằng cách sử dụng các giá trị môi trường safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom và safe-area-inset-left. Những từ khoá này được gói trong một hàm env().

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Biến môi trường hoạt động giống như thuộc tính tuỳ chỉnh. Điều này có nghĩa là bạn có thể chuyển vào một tuỳ chọn dự phòng trong trường hợp biến môi trường không tồn tại.

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

Để các biến môi trường đó hoạt động trên iPhone X, hãy cập nhật phần tử meta chỉ định thông tin viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Giờ đây, bố cục trang của bạn sẽ chiếm toàn bộ khung nhìn và đặt tài liệu một cách an toàn với các giá trị phần lồng ghép do thiết bị cung cấp.

Đối với màn hình có thể gập lại, 6 biến môi trường mới đang được đề xuất: viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom, viewport-segment-right.

Dưới đây là ví dụ về bố cục có hai cột, một cột rộng hơn cột còn lại.

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

Đối với màn hình đôi có bản lề dọc, hãy đặt cột đầu tiên là chiều rộng của màn hình đầu tiên và cột thứ hai là chiều rộng của màn hình thứ hai.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

Xem màn hình đôi là một cơ hội. Có thể bạn có thể dùng một màn hình để hiện nội dung văn bản có thể cuộn trong khi màn hình còn lại cho thấy một thành phần cố định như hình ảnh hoặc bản đồ.

Tương lai

Màn hình có thể gập lại sẽ trở thành tác phẩm lớn tiếp theo? Ai mà biết được. Không ai có thể dự đoán được mức độ phổ biến của thiết bị di động, vì vậy, bạn nên cởi mở về các kiểu dáng trong tương lai.

Trên hết, bạn cần đảm bảo rằng trang web của mình có thể phản hồi bất cứ điều gì có thể xảy ra trong tương lai. Đó là điều mà thiết kế đáp ứng mang lại cho bạn: không chỉ là một bộ kỹ thuật thực tế mà còn là một tư duy sẽ giúp ích cho bạn, cũng như để giúp bạn xây dựng web trong tương lai.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về cấu hình màn hình