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

Katie Hempenius

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

• Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen (Toàn màn hình).
• Tải lại trang bằng cách sử dụ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ị để thực hiện việc này. Nếu bạn đang tìm mật độ hiển thị cụ thể, dưới đây là một số thiết bị nên thử:

• Hãy thanh toán index.html để tìm mã giúp hoạt động này diễn ra.

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

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

Pixel là gì

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

Pixel của thiết bị (còn gọi là "pixel thực")

Chấ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 vốn không có kích thước vật lý.

Pixel CSS

Thông số kỹ thuật của CSS xác định pixel là một đơn vị đo lường thực. 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 độ của pixel thiết bị trong một khu vực thực tế nhất định. Chỉ số này thường được đo bằng pixel trên mỗi 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 pixel là 1/96 inch). Kể từ những năm 1980, đây là độ phân giải mặc định của Windows. Ngoài ra, đây 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 biệt, Apple đã gây được tiếng vang lớn vào năm 2010 khi giới thiệu màn hình Retina. Các màn hình này có độ phân giải tối thiểu là 192 ppi, cao gấp đôi độ phân giải của màn hình "thông thường" (192 ppi/96 ppi = 2).

window.devicePixelRatio

Với sự ra đời của công nghệ hiển thị mới hơn, "pixel thiết bị" bắt đầu thay đổi kích thước thực và hình dạng và không còn giống kích thước như "pixel CSS". Nhu cầu xác định mối quan hệ giữa kích thước "pixel thiết bị" và "pixel CSS" dẫn đến sự ra đời của 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ể. Một 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".

Ngày nay, hầu hết các thiết bị đều có tỷ lệ pixel của thiết bị nằm trong khoảng từ 1.0 đến 4.0.

• Xác định mật độ pixel của một 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 là từ 1.0 đến 4.0.

Vậy làm cách nào để áp dụng thông tin này trên thực tế?

Định kích thướ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 nhiều phiên bản hình ảnh cho từng devicePixelRatios.

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

• Kích thước pixel 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 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 hỏng mục đích phân phát nhiều phiên bản hình ảnh. Trình duyệt vẫn sẽ thực hiện việc này nếu không cung cấp hình ảnh có độ phân giải cao.

Sử dụng Mã mô tả mật độ để phân phát nhiều hình ảnh

Bạn có thể sử dụng bộ mô tả mật độ cùng với thuộc tính "srcset " để phân phát hình ảnh khác nhau cho các devicePixelRatios khác nhau.

• Hãy xem tệp index.html và ghi chú 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 diễn đạt bằng từ:

• 1x, 2x và 3x đều là các chỉ số mô tả mật độ cho trình duyệt biết mật độ pixel cần nhắm đến của hình ảnh. Điều này giúp trình duyệt không phải 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 3 hình ảnh: flower-1x.jpg (dành cho các trình duyệt có mật độ pixel 1.0), flower-2x.jpg (dành cho các trình duyệt có mật độ pixel 2.0) và flower-3x.jpg (dành cho các 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 chỉ số mô tả mật độ. Ví dụ: chỉ số mô tả mật độ của 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ì giá trị này được giả định là 1x.
• Việc đưa mã 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 các tệp) nhưng không cần thiết. Hình ảnh có thể có tên tệp bất kỳ.
• Bạn không cần thêm thuộc tính sizes. Thuộc tính sizes chỉ được dùng với chỉ số mô tả chiều rộng.