Tại sao trình mô phỏng Google Chrome hiển thị iPhone 6 ở độ phân giải 375x667?

Question

Tôi đang cố gắng điều chỉnh kích thước hình ảnh của trang web theo cách lập trình cho các thiết bị có kích thước khác nhau. Nhưng bây giờ tôi đang gặp khó khăn nói với những gì kích thước tôi thực sự cần. Trong trình giả lập Google Chrome, tôi thấy một số hình ảnh của tôi bị bực bội, ví dụ: trên iPhone 6 từ 230x230 tự nhiên đến 357x357 được hiển thị. Hình ảnh chiếm gần như toàn bộ chiều rộng của màn hình mô phỏng và trông hơi bị xuống cấp, cho thấy chiều rộng của iPhone 6 không lớn hơn 357 pixel.

Nhưng Apple says iPhone 6 có độ phân giải 750x1334! Nếu điều đó đúng, hình ảnh sẽ tệ hơn nhiều, tôi nghĩ vậy.

Tôi cũng đã tìm thấy một số thông tin mâu thuẫn trên iPhone 4.

This site nói về iPhone 4 ở 640x960 pixel. Trình mô phỏng Chrome lại hiển thị nó ở một nửa các kích thước đó, 320x480.

This stackoverflow question nói rằng "màn hình iPhone chắc chắn là 320x480".

Tôi thiếu gì ở đây? Tại sao một số nguồn (bao gồm cả Apple) cung cấp các kích thước gấp hai lần trình giả lập của Chrome (và hình ảnh của tôi) nói gì?

Answer 1

Hãy thư giãn, bạn chuẩn bị hiểu mớ hỗn độn này. Chỉ cần thông báo rằng 2 * 375x667 = 750x1334.

Một điểm ảnh không phải là một điểm ảnh

Điều quan trọng là: mộtthiết bị điểm ảnhlà khác nhau từ mộtCSS điểm ảnh.

Chúng giống nhau trong thiết bị mật độ điểm ảnh thấp như màn hình máy tính của bạn (96 dpi). Tuy nhiên, thiết bị mật độ điểm ảnh cao như điện thoại thông minh và máy in (lên tới 160 dpi) cố tuân theo sự thống nhất chung W3C CSS3 spec rằng một pixel CSS phải luôn ở gần 1/96th inch (hoặc 0,26 mm) khi được xem từ khoảng cách thông thường (chiều dài cánh tay).

Chúng không tuân thủ thông số của chữ cái, vì điều đó sẽ ngụ ý 1px chính xác là 1/96 số thực inch ở cài đặt DPI cao chưa từng được triển khai trong bất kỳ trình duyệt AFAIK nào. Tuy nhiên, họ cố gắng làm cho pixel CSS của họ không quá nhỏ so với mật độ pixel rất cao bằng cách làm cho một pixel CSS bằng hai hoặc nhiều pixel thiết bị.

Chế độ thiết bị Chrome hoạt động với Pixel CSS, là những gì bạn nên sử dụng để thiết kế văn bản, thanh điều hướng, tiêu đề, v.v. nhưng không có hình ảnh có độ phân giải cao. Đối với những điều này, hãy đọc phần tiếp theo.

^{Nếu bạn không nhận thấy, hình ảnh ở trên cho thấy Chế độ thiết bị Chrome hiển thị cho bạn quy mô thiết bị (số pixel thiết bị bằng một pixel CSS).}

Sửa phân giải hình ảnh

Như bạn đã biết, điều này ảnh hưởng đến hình ảnh tiêu cực, kể từ khi trình duyệt quy mô hình ảnh là tốt. Hình ảnh CSS 230x230 CSS của bạn trở thành 460x460 pixel thiết bị, sử dụng cùng chất lượng. Để khắc phục điều đó, hãy use the srcset attribute để cung cấp cho trình duyệt liên kết đến các tệp có độ phân giải khác nhau của cùng một hình ảnh.

Ví dụ (chuyển thể từ liên kết ở trên):

<img src="wolf-400.jpg" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"> 

Một iPhone 6 sẽ nhìn vào đó và suy nghĩ "oh, tôi giả vờ là 375px rộng nhưng tôi thực sự là 750px, vì vậy tôi sẽ tải về wolf-800.jpg. "

Đừng quên sử dụng src="" để tương thích. Ngoài ra, trừ khi bạn sử dụng sizes="", trình duyệt sẽ mặc định là toàn bộ chiều rộng của thiết bị.