Android: Hỗ trợ các màn hình khác nhau trong các ứng dụng web
Vì Android có sẵn trên các thiết bị có nhiều kích cỡ màn hình và mật độ pixel, ta nên tính đến các yếu tố này trong thiết kế web để các trang của ta luôn xuất hiện ở kích thước phù hợp. WebView hỗ trợ các tính năng DOM, CSS và thẻ meta để giúp ta đảm bảo rằng nội dung web được hiển thị phù hợp.
Khi nhắm mục tiêu các trang web của ta cho các thiết bị Android, có hai yếu tố chính ta nên tính đến:
Khung nhìn là khu vực hình chữ nhật cung cấp một vùng có thể vẽ cho trang web của ta. Ta 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 của nó. Quan trọng nhất là chiều rộng khung nhìn, xác định tổng số pixel ngang có sẵn theo số điểm ảnh của trang web (số lượng pixel CSS có sẵn).
Lớp WebView và những trình duyệt web phổ biến nhất trên Android chuyển đổi giá trị pixel CSS thành giá trị pixel mật độ độc lập, vì vậy trang web của ta xuất hiện ở kích thước ứng với một màn hình có mật độ trung bình (khoảng 160dpi). Tuy nhiên, nếu đồ họa là một yếu tố quan trọng trong thiết kế web của ta thì ta nên chú ý đến tỷ lệ ứng với các mật độ khác nhau, chẳng hạn hình ảnh rộng 300px trên màn hình 320dpi sẽ được thu nhỏ (sử dụng nhiều pixel vật lý trên mỗi pixel CSS), có thể tạo ra hiệu ứng như làm mờ và pixelation. Để đơn giản, Android thu gọn hầu hết mật độ màn hình nhỏ hơn vào một số loại gồm: nhỏ, trung bình và lớn.
Tham khảo các tài nguyên liên quan sau đây:
- Giao diện người dùng Pixel-Perfect trong WebView
- Tạo một thiết kế web đáp ứng đầu tiên trên thiết bị di động
- Hình ảnh DPI cao cho mật độ pixel thay đổi
Chỉ định thuộc tính khung nhìn
Khung nhìn là khu vực mà trang web của ta được vẽ. Mặc dù tổng diện tích hiển thị của khung nhìn phù hợp với kích thước của màn hình khi được phóng to hết cỡ, nhưng khung nhìn có kích thước pixel riêng mà nó có sẵn cho một 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 800 pixel. Điều này cho phép một trang web được thiết kế 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 Chrome) đều đặt chế độ xem thành kích thước lớn theo mặc định (được gọi là "chế độ chế độ xem rộng" ở độ rộng khoảng 980px). 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 khung nhìn (được gọi là "chế độ tổng quan").
Lưu ý: Khi trang của ta được hiển thị ở chế độ một
WebView, nó không sử dụng chế độ khung nhìn mở rộng (trang xuất hiện ở mức thu phóng tối đa) theo mặc định. Ta có thể kích hoạt chế độ khung nhìn rộng bằngsetUseWideViewPort().
Ta có thể xác định các thuộc tính của chế độ xem cho trang web của mình, chẳng hạn như độ rộng và mức thu phóng ban đầu, bằng cách sử dụng thẻ <meta name="viewport" ...> đặt trong thẻ <head> của trang web.
Cú pháp sau đây cho thấy tất cả các thuộc tính khung nhìn được hỗ trợ và các loại giá trị được chấp nhận theo từng loại:
<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 chỉ định rằng chiều rộng của khung nhìn phải khớp chính xác với chiều rộng của màn hình thiết bị và khả năng thu phóng sẽ bị tắt:
<head> <title>Example</title> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head>
Khi tối ưu hóa trang web cho thiết bị di động, ta thường nên đặt chiều rộng "device-width"sao cho kích thước vừa vặn với tất cả các thiết bị, sau đó sử dụng CSS để điều chỉnh bố cục linh hoạt cho phù hợp với các kích thước màn hình khác nhau.
Lưu ý: Ta chỉ nên vô hiệu hóa tỷ lệ người dùng khi chắc chắn rằng bố cục trang web của ta linh hoạt và nội dung sẽ phù hợp với chiều rộng của màn hình nhỏ.
Nhắm mục tiêu mật độ thiết bị với CSS
WebView hỗ trợ tính năng CSS media cho phép ta tạo style cho mật độ màn hình cụ thể, đó là -webkit-device-pixel-ratio. Giá trị áp dụng cho tính năng này phải là "0.75", "1" hoặc "1.5", để chỉ ra rằng các kiểu dành cho các thiết bị có màn hình mật độ thấp, mật độ trung bình hoặc mật độ cao tương ứng.
Ví dụ: ta có thể tạo các bảng đị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ề việc xử lý các mật độ màn hình khác nhau, đặc biệt là hình ảnh, hãy xem bài viết Hình ảnh DPI cao để biết mật độ pixel thay đổi.
Nhắm mục tiêu mật độ thiết bị với JavaScript
WebView hỗ trợ thuộc tính DOM cho phép ta truy vấn mật độ của thiết bị hiện tại, đó là thuộc tính window.devicePixelRatioDOM. Giá trị của thuộc tính này chỉ định hệ số tỷ lệ được sử dụng cho thiết bị hiện tại. Ví dụ: nếu giá trị window.devicePixelRatio là "1.0", thì thiết bị được coi là thiết bị có mật độ trung bình và không có tỷ lệ được áp dụng theo mặc định; nếu giá trị là "1.5", thì thiết bị được coi là thiết bị có mật độ cao và trang được chia tỷ lệ 1.5x theo mặc định; nếu giá trị là "0.75" thì thiết bị được coi là thiết bị có mật độ thấp và trang được chia tỷ lệ 0.75x theo mặc định. Tất nhiên, việc chia tỷ lệ mà Trình duyệt Android và WebView áp dụng dựa trên mật độ mục tiêu của trang web như được mô tả trong bài viết Xác định mật độ mục tiêu của chế độ xem, mục tiêu mặc định là mật độ trung bình, nhưng ta có thể thay đổi mục tiêu để ảnh hưởng đến cách trang web của ta được thu nhỏ cho các mật độ màn hình khác nhau.
Ví dụ: đây là cách ta 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"); }
Nguồn: https://developer.android.com/guide/webapps/targeting