Sử dụng bộ mô tả mật độ

Katie Hempenius
Katie Hempenius
X

Khám phá bản minh hoạ này

  • Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Toàn màn hình toàn màn hình.
  • Tải lại trang bằng các thiết bị khác nhau để xem trình duyệt tải các hình ảnh khác nhau.

Bạn có thể sử dụng trình mô phỏng thiết bị cho việc này. Nếu bạn đang tìm mật độ hiển thị cụ thể, hãy thử một số thiết bị sau:

Mật độ 1x Blackberry Playbook, nhiều màn hình bên ngoài
Mật độ 2x iPad hoặc iPhone 5/6
Mật độ 3x Galaxy S5 hoặc iPhone X
  • Hãy xem index.html để biết mã giúp thực hiện việc này.

Cách thức hoạt động

Khái niệm về chỉ số mô tả mật độ có thể xa lạ với hầu hết mọi người. Để hiểu rõ hơn về các đơn vị này, bạn nên tìm hiểu một chút về cách trình duyệt hoạt động với pixel.

Pixel là gì?

Hãy bắt đầu từ đầu bằng cách xác định pixel là gì. Nghe có vẻ đơn giản, nhưng "pixel" thực sự có thể có nhiều ý nghĩa:

Pixel thiết bị (hay còn gọi là "pixel vật lý")
Điểm màu nhỏ nhất có thể hiển thị trên thiết bị.
Pixel logic
Thông tin chỉ định màu tại một vị trí cụ thể trên lưới. Loại pixel này không có kích thước vật lý vốn có.
Pixel CSS
Thông số kỹ thuật CSS xác định pixel là một đơn vị đo lường vật lý. 1 pixel = 1/96 inch.

Mật độ pixel

Mật độ pixel (còn gọi là "mật độ màn hình" hoặc "mật độ hiển thị") đo lường mật độ pixel của thiết bị trong một vùng thực tế nhất định. Mật độ này thường được đo bằng pixel trên inch (ppi).

Trong nhiều năm, 96 ppi là mật độ hiển thị rất phổ biến (do đó CSS xác định một pixel là 1/96 inch). Bắt đầu từ những năm 1980, đây là độ phân giải mặc định của Windows. Ngoài ra, đây cũng là độ phân giải của màn hình CRT.

Điều này bắt đầu thay đổi khi màn hình LED trở nên phổ biến vào những năm 2000. Cụ thể, Apple đã tạo nên tiếng vang lớn vào năm 2010 khi ra mắt màn hình Retina. Những màn hình này có độ phân giải tối thiểu là 192 ppi, gấp đôi độ phân giải của màn hình "thông thường" (192 ppi/96 ppi = 2).

window.devicePixelRatio

Khi công nghệ màn hình mới ra đời, "pixel thiết bị" bắt đầu thay đổi về kích thước và hình dạng thực tế, đồng thời không còn có cùng kích thước với "pixel CSS" nữa. Nhu cầu xác định mối quan hệ giữa kích thước của "pixel thiết bị" và "pixel CSS" là lý do dẫn đến việc ra mắt devicePixelRatio (đôi khi được gọi là "Tỷ lệ pixel CSS").

devicePixelRatio xác định mối quan hệ giữa pixel thiết bị và pixel CSS cho một thiết bị cụ thể. Thiết bị 192 ppi có devicePixelRatio là 2 (192 ppi/96 ppi = 2) vì "2 pixel hiển thị của thiết bị có kích thước bằng 1 pixel CSS".

Hiện nay, hầu hết các thiết bị đều có tỷ lệ pixel thiết bị từ 1 đến 4.

  • Xác định mật độ pixel của thiết bị bằng cách nhập window.devicePixelRatio vào bảng điều khiển.

  • Hãy xem bảng này để biết tỷ lệ pixel của các thiết bị phổ biến. Hầu hết các giá trị đều nằm trong khoảng từ 1 đến 4.

Vậy làm thế nào để áp dụng thông tin này?

Định cỡ hình ảnh dựa trên tỷ lệ pixel của thiết bị

Để hình ảnh trông đẹp nhất trên màn hình có độ phân giải cao, bạn cần cung cấp các phiên bản hình ảnh khác nhau cho nhiều devicePixelRatios.

Tỷ lệ pixel của thiết bị Cho biết rằng: Trên thiết bị này, thẻ <img> có chiều rộng CSS là 250 pixel sẽ trông đẹp nhất khi hình ảnh nguồn là...
1 1 pixel thiết bị = 1 pixel CSS Chiều rộng 250 pixel
2 2 pixel thiết bị = 1 pixel CSS Chiều rộng 500 pixel
3 3 pixel thiết bị = 1 pixel CSS Chiều rộng 750 pixel

Những điều cần lưu ý:

  • Kích thước pixel được liệt kê trong trình chỉnh sửa hình ảnh, thư mục tệp và các vị trí khác là số đo pixel logic.
  • Đối với màn hình có độ phân giải cao hơn và màn hình lớn hơn, bạn sẽ cần hình ảnh có kích thước lớn hơn. Việc chỉ phóng to hình ảnh nhỏ hơn sẽ làm mất đi mục đích của việc phân phát nhiều phiên bản hình ảnh. Trình duyệt sẽ thực hiện việc này nếu không có hình ảnh độ phân giải cao.

Sử dụng chỉ số mô tả mật độ để phân phát nhiều hình ảnh

Bạn có thể sử dụng chỉ số mô tả mật độ cùng với thuộc tính "srcset " để phân phát nhiều hình ảnh cho nhiều devicePixelRatio.

  • Hãy xem tệp index.html và lưu ý phần tử <img>.
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

Ví dụ này được diễn giải như sau:

  • 1x, 2x và 3x đều là các chỉ số mô tả mật độ cho trình duyệt biết mật độ pixel mà hình ảnh hướng đến. Điều này giúp trình duyệt không cần tải hình ảnh xuống để xác định thông tin này.
  • Trình duyệt có thể chọn giữa ba hình ảnh: flower-1x.jpg (dành cho trình duyệt có mật độ pixel 1.0), flower-2x.jpg (dành cho trình duyệt có mật độ pixel 2.0) và flower-3x.jpg (dành cho trình duyệt có mật độ pixel 3.0).
  • flower.jpg là hình ảnh dự phòng cho các trình duyệt không hỗ trợ srcset.

Cách sử dụng:

  • Sử dụng devicePixelRatio và đơn vị x để viết phần mô tả mật độ. Ví dụ: phần mô tả mật độ cho nhiều màn hình Retina (window.devicePixelRatio = 2) sẽ được viết là 2x.
  • Nếu bạn không cung cấp chỉ số mô tả mật độ, thì chỉ số này được giả định là 1x.
  • Việc đưa chỉ số mô tả mật độ vào tên tệp là một quy ước phổ biến (và sẽ giúp bạn theo dõi tệp) nhưng không bắt buộc. Hình ảnh có thể có tên tệp bất kỳ.
  • Bạn không cần phải thêm thuộc tính sizes. Thuộc tính sizes chỉ được dùng với các chỉ số mô tả chiều rộng.