điều này được đề cập đến mỗi bài viết về web di động, nhưng không nơi nào tôi có thể tìm thấy lời giải thích về chính xác những gì thuộc tính này đo lường.
Bất cứ ai có thể xin vui lòng giải thích những gì các truy vấn như kiểm tra này?

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

Câu trả lời ngắn

Tỷ lệ pixel của thiết bị là tỷ lệ giữa các pixel vật lý và các pixel logic. Chẳng hạn, iPhone 4 và iPhone 4S báo cáo tỷ lệ pixel của thiết bị là 2, vì độ phân giải tuyến tính vật lý gấp đôi độ phân giải tuyến tính logic.

• Độ phân giải vật lý: 960 x 640
• Độ phân giải logic: 480 x 320

Công thức là:

Ở đâu:

là độ phân giải tuyến tính vật lý

và:

là độ phân giải tuyến tính logic

Các thiết bị khác báo cáo tỷ lệ pixel thiết bị khác nhau, bao gồm cả tỷ lệ không nguyên. Ví dụ: Nokia Lumia 1020 báo cáo 1.6667, Samsumg Galaxy S4 báo cáo 3 và Apple iPhone 6 Plus báo cáo 2.46 (nguồn: dpilove ) . Nhưng điều này không thay đổi bất cứ điều gì về nguyên tắc, vì bạn không bao giờ nên thiết kế cho bất kỳ một thiết bị cụ thể nào.

Thảo luận

"Pixel" CSS thậm chí không được định nghĩa là "một yếu tố hình ảnh trên một số màn hình", mà là một phép đo góc phi tuyến tính của góc nhìn, có chiều dài xấp xỉ một inch. Nguồn: CSS Độ dài tuyệt đối

Điều này có rất nhiều ý nghĩa khi thiết kế web, chẳng hạn như chuẩn bị tài nguyên hình ảnh độ nét cao và cẩn thận áp dụng các hình ảnh khác nhau ở các tỷ lệ pixel thiết bị khác nhau. Bạn sẽ không muốn buộc một thiết bị cấp thấp tải xuống hình ảnh có độ phân giải rất cao, chỉ để hạ thấp nó cục bộ. Bạn cũng không muốn các thiết bị cao cấp nâng cấp hình ảnh độ phân giải thấp cho trải nghiệm người dùng mờ.

Nếu bạn bị mắc kẹt với hình ảnh bitmap, để phù hợp với nhiều tỷ lệ pixel của thiết bị khác nhau, bạn nên sử dụng CSS Media Queries để cung cấp các bộ tài nguyên khác nhau cho các nhóm thiết bị khác nhau. Kết hợp điều này với các thủ thuật background-size: coverhay như hoặc đặt rõ ràng các background-sizegiá trị phần trăm.

Thí dụ

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

Bằng cách này, mỗi loại thiết bị chỉ tải tài nguyên hình ảnh chính xác. Ngoài ra, hãy nhớ rằng pxđơn vị trong CSS luôn hoạt động trên các pixel logic .

Một trường hợp cho đồ họa vector

Khi ngày càng có nhiều loại thiết bị xuất hiện, việc cung cấp cho tất cả chúng các tài nguyên bitmap đầy đủ sẽ trở nên khó khăn hơn. Trong CSS, truy vấn phương tiện hiện là cách duy nhất và trong HTML5, yếu tố hình ảnh cho phép bạn sử dụng các nguồn khác nhau cho các truy vấn phương tiện khác nhau, nhưng hỗ trợ vẫn không phải là 100% vì hầu hết các nhà phát triển web vẫn phải hỗ trợ IE11 thêm một thời gian nữa ( nguồn: caniuse ) .

Nếu bạn cần hình ảnh sắc nét cho các biểu tượng, nghệ thuật vẽ đường, các yếu tố thiết kế không phải là ảnh , bạn cần bắt đầu suy nghĩ về SVG, có tỷ lệ đẹp cho mọi độ phân giải.

Tỷ lệ pixel thiết bị == Tỷ lệ pixel CSS

Trong thế giới phát triển web, tỷ lệ pixel của thiết bị (còn được gọi là Tỷ lệ pixel CSS) là yếu tố quyết định độ phân giải màn hình của thiết bị được CSS diễn giải như thế nào.

CSS của trình duyệt tính toán độ phân giải logic (hoặc diễn giải) của thiết bị theo công thức:

Ví dụ:

Apple iPhone 6s

• Độ phân giải thực tế: 750 x 1334
• Tỷ lệ pixel CSS: 2
• Nghị quyết logic:

Khi xem một trang web, CSS sẽ nghĩ thiết bị có màn hình độ phân giải 375x667 và Media Queries sẽ phản hồi như thể màn hình là 375x667 . Nhưng các yếu tố được hiển thị trên màn hình sẽ sắc nét gấp đôi so với màn hình 375x667 thực tế vì có gấp đôi số pixel vật lý trong màn hình vật lý.

Một số ví dụ khác:

Samsung Galaxy S4

• Độ phân giải thực tế: 1080 x 1920
• Tỷ lệ pixel CSS: 3
• Nghị quyết logic:

Iphone 5s

• Độ phân giải thực tế: 640 x 1136
• Tỷ lệ pixel CSS: 2
• Nghị quyết logic:

Tại sao Tỷ lệ pixel thiết bị tồn tại?

Lý do tỷ lệ pixel CSS được tạo là vì màn hình điện thoại có độ phân giải cao hơn, nếu mọi thiết bị vẫn có tỷ lệ pixel CSS là 1 thì các trang web sẽ hiển thị quá nhỏ để xem.

Một màn hình máy tính để bàn toàn màn hình thông thường có độ phân giải khoảng 24 "ở độ phân giải 1920x1080. Hãy tưởng tượng nếu màn hình đó được thu nhỏ xuống còn khoảng 5" nhưng có cùng độ phân giải. Xem mọi thứ trên màn hình sẽ là không thể bởi vì chúng sẽ rất nhỏ. Nhưng các nhà sản xuất sắp ra mắt với màn hình điện thoại độ phân giải 1920x1080 liên tục.

Vì vậy, tỷ lệ pixel của thiết bị được phát minh bởi các nhà sản xuất điện thoại để họ có thể tiếp tục đẩy độ phân giải, độ sắc nét và chất lượng của màn hình điện thoại, mà không làm cho các yếu tố trên màn hình quá nhỏ để nhìn hoặc đọc.

Đây là một công cụ cũng cho bạn biết mật độ pixel của thiết bị hiện tại của bạn:

http://bjango.com/articles/min-device-pixel-ratio/

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-moz-device-pixel-ratio
Cung cấp số pixel của thiết bị trên mỗi pixel CSS.

điều này gần như tự giải thích. con số mô tả tỷ lệ bao nhiêu pixel "thực" (pixerls vật lý của màn hình) được sử dụng để hiển thị một pixel "ảo" (kích thước được đặt trong CSS).

Bài viết của Boris Smus Hình ảnh DPI cao cho mật độ pixel biến thiên có định nghĩa chính xác hơn về tỷ lệ pixel của thiết bị: số pixel thiết bị trên mỗi pixel CSS là xấp xỉ tốt, nhưng không phải là toàn bộ câu chuyện.

Lưu ý rằng bạn có thể nhận DPR được sử dụng bởi một thiết bị window.devicePixelRatio.