Hỗ trợ nhiều màn hình trong ứng dụng web

Vì Android có sẵn trên các thiết bị có nhiều kích thước màn hình và mật độ pixel, tính đến các yếu tố này trong thiết kế web của bạn để các trang của bạn có kích thước thích hợp. WebView hỗ trợ DOM, CSS và thẻ meta để giúp bạn hiển thị nội dung web của mình một cách thích hợp.

Khi nhắm mục tiêu các trang web của bạn cho các thiết bị chạy Android, có hai yếu tố chính cần tính đến cho:

Khung nhìn
Khung nhìn là vùng hình chữ nhật, cung cấp một vùng có thể vẽ cho trang web của bạn. Bạn có thể chỉ định một số thuộc tính của khung nhìn, chẳng hạn như kích thước và tỷ lệ ban đầu. Quan trọng nhất là chiều rộng khung nhìn, xác định tổng số pixel ngang có sẵn từ điểm xem—số pixel CSS có sẵn.
Mật độ màn hình
Lớp WebView và hầu hết các trình duyệt web trên Android chuyển đổi giá trị pixel CSS của bạn thành giá trị pixel không phụ thuộc vào mật độ, để trang web của bạn xuất hiện ở cùng kích thước nhận biết được như màn hình có mật độ trung bình – khoảng 160 dpi. Tuy nhiên, nếu đồ hoạ là một yếu tố quan trọng của thiết kế web của bạn, hãy chú ý đến việc mở rộng xảy ra trên các mật độ khác nhau. Ví dụ: một hình ảnh chiều rộng 300 px trên màn hình 320 dpi được tăng kích thước — sử dụng nhiều pixel vật lý hơn cho mỗi CSS điểm ảnh. Việc này có thể tạo ra các hiện tượng như làm mờ và nhiễu điểm ảnh. Để đơn giản hoá, Android thu gọn hầu hết các mật độ màn hình nhỏ hơn thành một vài danh mục chung: nhỏ, trung bình và lớn. Để tìm hiểu tìm hiểu thêm về mật độ màn hình, đọc Hỗ trợ nhiều mật độ pixel.

Hãy tham khảo các tài nguyên liên quan sau:

Chỉ định các thuộc tính của khung nhìn

Khung nhìn là vùng trang web của bạn được vẽ. Mặc dù toàn bộ khung nhìn có thể nhìn thấy khu vực đó khớp với kích thước của màn hình khi được phóng to hết cỡ, khung nhìn sẽ có điểm ảnh riêng mà nó tạo sẵn cho trang web. Ví dụ: mặc dù màn hình thiết bị có thể có chiều rộng vật lý là 480 pixel thì khung nhìn có thể có chiều rộng là 800 pixel. Thao tác này cho phép trang web được thiết kế ở độ rộng 800 pixel hoàn toàn có thể nhìn thấy trên màn hình khi tỷ lệ khung nhìn là 1.0.

Thường gặp nhất trình duyệt web trên Android (bao gồm cả Chrome) đặt khung nhìn thành kích thước lớn theo mặc định. _Chế độ khung nhìn rộng_ này rộng khoảng 980 px. Nhiều trình duyệt cũng thu nhỏ đến mức theo mặc định, chế độ xem tổng quan có thể hiển thị toàn bộ chiều rộng khung nhìn, được gọi là _chế độ tổng quan_.

Bạn có thể xác định các thuộc tính của khung nhìn cho trang web của mình, chẳng hạn như chiều rộng và mức thu phóng ban đầu bằng cách sử dụng thẻ <meta name="viewport" ...> trong tài liệu <head>

Cú pháp sau cho biết tất cả các thuộc tính được hỗ trợ của khung nhìn và loại giá trị được chấp nhận bởi từng nhà xuất bản:

<meta name="viewport"
      content="
          height = [pixel_value | "device-height"] ,
          width = [pixel_value | "device-width"] ,
          initial-scale = float_value ,
          minimum-scale = float_value ,
          maximum-scale = float_value ,
          user-scalable = ["yes" | "no"]
          " />

Ví dụ: thẻ <meta> sau đây chỉ định rằng chiều rộng khung nhìn phải khớp với chiều rộng màn hình thiết bị và khả năng thu phóng bị tắt:

<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

Khi tối ưu hoá trang web cho thiết bị di động, bạn thường đặt chiều rộng thành "device-width" để kích thước vừa vặn trên tất cả thiết bị, sau đó sử dụng truy vấn phương tiện CSS để linh hoạt điều chỉnh bố cục cho phù hợp với nhiều kích thước màn hình.

Mật độ thiết bị mục tiêu thông qua CSS

WebView hỗ trợ -webkit-device-pixel-ratio, một phương tiện CSS cho phép bạn tạo kiểu cho mật độ màn hình cụ thể. Giá trị bạn áp dụng cho phải là 0,75, 1 hoặc 1,5 để cho biết rằng kiểu dành cho các thiết bị có giá trị thấp, trung bình hoặc màn hình có mật độ điểm ảnh cao tương ứng.

Bạn có thể tạo biểu định kiểu riêng cho từng mật độ:

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

Hoặc chỉ định các kiểu khác nhau trong một biểu định kiểu:

#header {
    background:url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        background:url(high-density-image.png);
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens */
    #header {
        background:url(low-density-image.png);
    }
}

Để biết thêm thông tin về cách xử lý nhiều mật độ màn hình, đặc biệt là hình ảnh, hãy xem Hình ảnh DPI cao cho mật độ pixel thay đổi.

Mật độ thiết bị mục tiêu bằng JavaScript

WebView hỗ trợ window.devicePixelRatio, một thuộc tính DOM cho phép bạn truy vấn mật độ của thiết bị hiện tại. Giá trị của thuộc tính này chỉ định tỷ lệ hệ số được sử dụng cho thiết bị hiện tại. Nếu giá trị của window.devicePixelRatio là 1,0 thì thiết bị đó được coi là thiết bị có mật độ điểm ảnh trung bình và không có tỷ lệ nào được áp dụng theo mặc định. Nếu là 1,5, thì thiết bị đó được coi là thiết bị có mật độ điểm ảnh cao và trang được chia tỷ lệ 1,5 lần mặc định. Nếu giá trị là 0,75 thì thiết bị đó được coi là thiết bị có mật độ điểm ảnh thấp và trang đó tỷ lệ 0,75 lần theo mặc định.

Tỷ lệ mà trình duyệt Android và WebView áp dụng sẽ dựa trên tỷ lệ của trang web mật độ mục tiêu. Như được mô tả trong phần xác định khung nhìn mật độ mục tiêu, thì mục tiêu mặc định là mật độ trung bình, nhưng bạn có thể thay đổi mục tiêu để tác động đến cách trang web của bạn được điều chỉnh theo tỷ lệ cho các mật độ màn hình khác nhau.

Ví dụ: dưới đây là cách bạn có thể truy vấn mật độ thiết bị bằng JavaScript:

if (window.devicePixelRatio == 1.5) {
  alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
  alert("This is a low-density screen");
}