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 Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh .
• Tải lại trang bằng nhiều thiết bị để xem trình duyệt tải nhiều hình ảnh.

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 kiếm mật độ hiển thị cụ thể, hãy thử một số thiết bị sau đây:

• 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

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

Pixel là gì

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

Pixel 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 không có kích thước vật lý cố hữu.

Pixel CSS

Thông số kỹ thuật CSS xác định pixel là đơn vị đo lường vật lý. 1 pixel = 1/96 inch.

Mật độ điểm ảnh

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 khu vực vật lý 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 độ màn hình rất phổ biến (do đó, CSS xác định một 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, đó 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 ra một sự kiện lớn vào năm 2010 khi ra mắt 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, 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 trên thiết bị" bắt đầu thay đổi về kích thước vật lý và hình dạng và không còn cùng kích thước với "pixel CSS". 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 giới thiệu 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ị có mật độ điểm ảnh 192 ppi có devicePixelRatio là 2 (192 ppi/96 ppi = 2) vì "2 pixel màn hình có kích thước bằng 1 pixel CSS".

Ngày nay, hầu hết thiết bị đều có tỷ lệ pixel của thiết bị 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.

• Xem bảng này để biết tỷ lệ pixel của các thiết bị phổ biến. Đa số nằm trong khoảng từ 1.0 đến 4.0.

Vậy bạn thực sự áp dụng thông tin này như thế nào?

Đị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 nhiều phiên bản hình ảnh cho nhiều devicePixelRatios.

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 của 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 các 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. Dù sao thì trình duyệt cũng sẽ thực hiện việc này nếu bạn không cung cấp hình ảnh có độ phân giải cao.

Sử dụng Nội dung 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ụ sau được viết bằng các 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 mà hình ảnh dự kiến sẽ hiển thị. Đ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 trong số 3 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 để ghi nội dung 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ì giá trị 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 các 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 thêm thuộc tính sizes. Thuộc tính sizes chỉ được sử dụng với chỉ số mô tả chiều rộng.