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 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 kiếm mật độ màn hình 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 độ gấp 2 lần iPad hoặc iPhone 5/6
Mật độ 3x Galaxy S5 hoặc iPhone X
  • Thanh toán index.html để biết mã giúp quá trình này hoạt động.

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

Khái niệm mã 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 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ố CSS xác định một pixel là một đơn vị đo lường thực tế. 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 độ của pixel thiết bị trong một khu vực vật lý nhất định. Thông số 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). Kể 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 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

Khi công nghệ hiển thị mới ra đời, "pixel thiết bị" bắt đầu thay đổi về kích thước thực và hình dạng, đồ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 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. Hầu hết các giá trị này đều 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 từng devicePixelRatios khác nhau.

Tỷ lệ pixel của thiết bị Cho biết: 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 trên thiết bị = 1 pixel CSS Chiều rộng 250 pixel
2 2 pixel trên 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 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 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.