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 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 mức khác nhau hình ảnh.

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

• Thanh toán index.html để tìm 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. Để cải thiện hiểu các yêu cầu đó, việc có một số thông tin cơ bản về cách hoạt động của trình duyệt sẽ giúp ích cho bạn có pixel.

Pixel là gì

Hãy bắt đầu từ đầu bằng cách xác định pixel là gì. Nghe thế này đơ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 sắc của 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 định nghĩa pixel là đơn vị đo lường vật lý. 1 pixel = 1/96 inch.

Mật độ điểm ảnh

Mật độ điểm ảnh (còn được gọi là "mật độ màn hình" hoặc "mật độ hiển thị") đo mật độ pixel của thiết bị trong một khu vực vật lý nhất định. Đây là 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 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, đó là độ phân giải CRT màn hình.

Đ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 đã 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 có độ phân giải tối thiểu là 192 ppi, cao gấp đôi độ phân giải của "thông thường" màn hình (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à hình dạng và không còn kích thước giống như "pixel CSS". Sự cần thiết phải xác định mối quan hệ giữa kích thước "pixel thiết bị" và "CSS pixel" là gì dẫn đến sự ra mắt của devicePixelRatio (đôi khi được gọi là "CSS Pixel Tỷ lệ").

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 hiển thị của nó 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 trong bảng điều khiển.

• Xem bảng này để xem 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 làm cách nào để áp dụng thông tin này trên thực tế?

Xác đị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, cần thiết để cung cấp phiên bản hình ảnh khác nhau cho devicePixelRatios khác nhau.

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à vị trí khác là số đo các pixel logic.
• Đối với các 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 kèm theo kích thước lớn hơn. Việc chỉ phóng to hình ảnh nhỏ hơn phá vỡ mục đích của 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 hình ảnh có độ phân giải cao không được cung cấp.

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

Phần mô tả mật độ, cùng với phần tử "srcset" , có thể được dùng để phân phát các hình ảnh khác nhau đến các thiết bị PixelRatios khác nhau.

• Hãy xem tệp index.html và để ý 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 cần nhắm tới. Thao tác này sẽ lưu trình duyệt không cần tải một hình ảnh xuống để xác định thông tin này.
• Trình duyệt có thể chọn trong số ba hình ảnh: flower-1x.jpg (mục đích) cho các 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 mã mô tả mật độ. Cho ví dụ: bộ 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 mã mô tả mật độ vào tên tệp là một quy ước chung (và sẽ giúp bạn theo dõi tệp) nhưng không cần thiết. Hình ảnh có thể chứa bất kỳ tên tệp.
• Bạn không cần thêm thuộc tính sizes. Thuộc tính sizes chỉ là được sử dụng cùng với mã mô tả chiều rộng.