Nền

Từ iPhone của Apple Nhiều ứng dụng tương thích trực tiếp với kiểu xem web bên trong. Khi màn hình ở chế độ dọc, phía trên thường là thanh điều hướng, không che được nội dung trong webview. Chiều cao dưới cùng được đặt từ cấp ứng dụng sao cho phần dưới cùng của chế độ xem web không nằm trong vùng thanh ngang màu đen để không cản trở việc hiển thị nội dung trong chế độ xem web.

Tuy nhiên, mỗi ứng dụng đều rất khác nhau và chế độ xem web bên trong sẽ được hiển thị khác nhau. Nếu không có chiều cao dưới cùng của ứng dụng thì nội dung dưới cùng trong chế độ xem web sẽ bị chặn bởi một thanh màu đen nhỏ. Về khả năng tương thích kiểu trang web, nó cần phải tương thích với kiểu "nổ" độc đáo và kiểu thanh ngang nhỏ màu đen ở dưới cùng của iPhoneX mà không ảnh hưởng đến kiểu dáng của các mẫu máy trước đó.

Khu vực an toàn

Đầu tiên hãy hiểu vùng an toàn của iphoneX. Phần màu xanh trong hình bên dưới là vùng an toàn. Phần lề 2 bên, phần notch ở phía trên và vùng thanh nhỏ màu đen ở phía dưới đều là những khu vực không an toàn và là những khu vực có thể chặn nội dung. Sau đó, chúng ta cần kiểm soát nội dung của mình trong vùng an toàn.

Giải pháp tương thích

May mắn thay, khi iphoneX ra mắt, hệ thống ios11 chính thức cũng cung cấp WebKit Api để tương thích với sự khác biệt về phong cách này.

Bước một: Đặt thuộc tính phù hợp với khung nhìn

viewport-fit có ba giá trị thuộc tính: auto, contains và fit. Mặc định là tự động.
chứa: Cửa sổ trực quan chứa hoàn toàn nội dung trang web và nội dung trang được hiển thị trong vùng an toàn
bìa: Nội dung trang web che phủ hoàn toàn cửa sổ trực quan và nội dung trang lấp đầy màn hình
auto: giá trị mặc định, nhất quán với contains
Theo mặc định, Safari hiển thị tình huống viewport-fit=contain như hiển thị bên dưới. Ở chế độ ngang, nội dung trang trong chế độ xem web nằm trong vùng an toàn. Tuy nhiên, nhìn từ góc độ kiểu dáng thì điều này không đẹp lắm và không tận dụng tốt tính năng toàn màn hình mà iPhoneX mang lại.

Để giải quyết vấn đề này, WebKit trong ios11 bao gồm hàm CSS mới env() và bốn biến môi trường được xác định trước safe-area-inset-left, safe-area-inset-right, safe-area-inset-top và safe-area-inset-bottom. Bốn biến môi trường này biểu thị khoảng cách từ khu vực an toàn.

  • safe-area-inset-left: Khoảng cách giữa vùng an toàn và ranh giới bên trái
  • safe-area-inset-right: Khoảng cách giữa vùng an toàn và ranh giới bên phải
  • safe-area-inset-top: Khoảng cách giữa vùng an toàn và ranh giới trên cùng
  • safe-area-inset-bottom: Khoảng cách giữa vùng an toàn và ranh giới phía dưới

ios11.2 trước đây sử dụng hàm constants() nhưng sau đó nó được đổi thành hàm env() trong phiên bản ios11.2. Để tương thích với cả hai, bạn có thể viết cả hai.

Bước 2: Thiết lập khoảng cách vùng an toàn

.post {
    phần đệm: 12px;
    đệm-trái: hằng số(safe-area-inset-left); // ios<11.2
    đệm-trái: env(vùng an toàn-inset-trái); // ios>=11.2
}

Theo cách này, khi không nằm trong vùng an toàn, env(safe-area-inset-left) không bằng 0, điều này sẽ khiến khoảng cách an toàn được đặt trên phần đệm bên trái để nội dung không bị chặn.

Trường hợp trên là trường hợp bị "tiếng nổ" chặn lại. Trên thực tế, trong nhiều trường hợp hơn, thanh màu đen nhỏ ở dưới cùng chặn thanh nổi, cộng với hỗ trợ thuộc tính phán đoán@supports , css bên trong sẽ chỉ được thực thi khi env(safe-area-inset-bottom) được trình duyệt hỗ trợ. 

.thanh dưới cùng{
  chiều rộng: 100%;
  vị trí: cố định;
  đáy: 0;
  nền: màu xanh;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-bar {
      phần đệm-đáy: hằng số(safe-area-inset-bottom);
      phần đệm-đáy: env(safe-area-inset-bottom);
    }
  }

Lưu ý: Chế độ xem web trong WeChat ở trạng thái viewport-fit=cover mặc định. Bạn chỉ cần thiết lập một khoảng cách an toàn. Giải pháp trên cũng có thể áp dụng cho applet WeChat.