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 xem xét 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 nhanh chóng của điện thoại di động có trình duyệt web tích hợp sẵn.

Thiết kế web đáp ứng khuyến khích tư duy đặt câu hỏi về những giả định. Trái lại, trước đây chúng ta thường cho rằng một trang web sẽ chỉ xem được trên máy tính để bàn, thì giờ đây, phương pháp tiêu chuẩn là 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 qua việc sử dụng máy tính trên web.

Tư duy phản hồi 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ẽ xem được trên những thiết bị và màn hình mà chúng tôi thậm chí không thể hình dung ra hiện nay. Tư duy này không chỉ dừng lại ở các thiết bị màn hình. Giờ đây, mọi người vẫn đang sử dụng những 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ể dùng các 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.

Ngoài ra, còn có thử nghiệm trong thế giới màn hình. Hiện nay trên thị trường có một số thiết bị có thể gập lại. Điều này dẫn đến một số thách thức đối với thiết kế của bạn.

Dual Screen

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 hai màn hình hay trải dài trên cả hai màn hình. Nếu trình duyệt trải rộng trên cả hai màn hình, thì trang web trên màn hình sẽ được chia nhỏ theo bản lề giữa hai màn hình. Có vẻ không ổn lắm.

Phân đoạn khung nhìn

Có một tính năng truyền thông 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, tức là bản lề trên thiết bị chạy từ trên xuống dưới, nội dung của bạn được chia thành 2 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 điều khiển, một bảng nằm 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ỉ 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ế xung quanh bản lề 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 bạn.

Biến môi trường trong CSS cho phép bạn đưa các sự can thiệp bất thường vào thiết bị 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. Các 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 như các thuộc tính tuỳ chỉnh. Tức là bạn có thể chuyển vào 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">

Bây giờ, bố cục trang của bạn sẽ chiếm toàn bộ khung nhìn và chèn tài liệu một cách an toàn bằng 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, chúng tôi đang đề xuất 6 biến môi trường mới: 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ề một bố cục có 2 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;
  }
}

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

Tương lai

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

Trên hết, điều đáng để đảm bảo là các trang web của bạn có thể phản ứng với mọi tình huống có thể xảy ra trong tương lai. Đó là những gì mà thiết kế đáp ứng mang lại cho bạn: không chỉ là một bộ kỹ thuật thiết thực, mà còn là tư duy sẽ phục vụ bạn tốt khi bạn xây dựng web trong tương lai.

Kiểm tra kiến thức

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