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

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

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

Khung nhìn
Khung nhìn là khu vực hình chữ nhật cung cấp một vùng có thể vẽ trên trang web của bạn. Bạn có thể chỉ định một số thuộc tính 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. Chiều rộng này xác định tổng số pixel ngang có sẵn trên góc nhìn của trang web – số lượng 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 thành giá trị pixel không phụ thuộc vào mật độ. Vì vậy, trang web của bạn sẽ xuất hiện ở cùng kích thước cảm nhận được như một màn hình có mật độ điểm ảnh trung bình, khoảng 160 dpi. Tuy nhiên, nếu đồ hoạ là một yếu tố quan trọng trong thiết kế web của bạn, hãy chú ý đến việc điều chỉnh tỷ lệ xảy ra trên các mật độ khác nhau. Ví dụ: Hình ảnh rộng 300 px trên màn hình 320 dpi được tăng tỷ lệ – sử dụng nhiều pixel vật lý hơn cho mỗi pixel CSS. Điều này có thể tạo ra các thành phần lạ như làm mờ và nhiễu điểm ảnh. Để đơn giản, 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 thêm về mật độ màn hình, hãy đọc bài viết Hỗ trợ nhiều mật độ pixel.

Hãy tham khảo các thông tin có liên quan sau:

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

Khung nhìn là khu vực nơi trang web của bạn được vẽ. Mặc dù tổng diện tích hiển thị của khung nhìn khớp với kích thước màn hình khi thu nhỏ hết cỡ, nhưng khung nhìn có kích thước pixel riêng được cung cấp 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, nhưng khung nhìn có thể có chiều rộng là 800 pixel. Điều này cho phép trang web được thiết kế với chiều rộng 800 pixel hiển thị hoàn toàn trên màn hình khi tỷ lệ khung nhìn là 1,0.

Hầu hết các trình duyệt web trên Android (bao gồm cả Chrome) đều đặt khung nhìn ở kích thước lớn theo mặc định. Chế độ khung nhìn _wide này_ rộng khoảng 980 px. Theo mặc định, nhiều trình duyệt cũng thu nhỏ hết mức có thể để hiển thị toàn bộ chiều rộng của khung nhìn, còn gọi là _overview mode_.

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 <head> tài liệu.

Cú pháp sau cho biết tất cả thuộc tính khung nhìn được hỗ trợ và các loại giá trị được mỗi thuộc tính chấp nhậ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 khớp với chiều rộng của màn hình thiết bị và chức 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ới mọi thiết bị, sau đó sử dụng các truy vấn phương tiện CSS để điều chỉnh bố cục một cách linh hoạt 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 bằng CSS

WebView hỗ trợ -webkit-device-pixel-ratio, một tính năng đa phương tiện CSS cho phép bạn tạo kiểu cho các mật độ màn hình cụ thể. Giá trị bạn áp dụng cho tính năng này 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ó màn hình với độ phân giải thấp, trung bình hoặc cao tương ứng.

Bạn có thể tạo biểu định kiểu riêng cho mỗi 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 kiểu khác 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 bài viết 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. Đây là 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 hệ số tỷ lệ 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 độ trung bình và không áp dụng tỷ lệ theo mặc định. Nếu giá trị là 1,5, thì thiết bị được coi là thiết bị có mật độ điểm ảnh cao và trang được điều chỉnh tỷ lệ 1,5 lần theo 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 được điều chỉnh theo tỷ lệ 0,75x theo mặc định.

Tỷ lệ mà trình duyệt Android và WebView áp dụng sẽ dựa trên mật độ mục tiêu của trang web. Như mô tả trong phần xác định mật độ mục tiêu của khung nhìn, 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 để ảnh hưở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");
}