Làm thế nào để kiểm tra trang web cho Retina trên Windows mà không có màn hình Retina thực tế?

Có cách nào để mô phỏng màn hình Retina trên Windows để kiểm tra trang web cho màn hình HiDPI chẳng hạn như Retina không?

Tôi chạy Windows trên màn hình 24 "1920x1080 tiêu chuẩn. Đêm qua, tôi đã kiểm tra trang web của mình trên chiếc MacBook Pro Retina 15" hoàn toàn mới của một người bạn và đồ họa trông mờ (tệ hơn nhiều so với MacBook 15 inch thông thường), trong khi phông chữ thì siêu nét và sắc nét, làm cho logo có vẻ xấu hơn vì so sánh trực tiếp.

Tôi đã làm theo hướng dẫn này để làm cho trang web của tôi sẵn sàng Retina:

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

Tôi đã sử dụng phương pháp retina.js vì tôi không có bất kỳ hình nền nào.

Có cách nào để tôi kiểm tra xem điều này có thực sự hoạt động không? Rõ ràng là tôi có thể yêu cầu bạn mình sử dụng Máy tính xách tay Retina của anh ấy nhưng đó không phải là một quy trình làm việc khả thi đối với tôi. Tôi muốn ít nhất có thể kiểm tra sơ bộ các trang web về khả năng tương thích Retina của nó trong môi trường của riêng tôi.

about: config hack trên Firefox

Bạn thực sự có thể sử dụng Firefox:

1. Đi tới "about: config"
2. Tìm "layout.css.devPixelsPerPx
3. Thay đổi nó thành tỷ lệ mong muốn của bạn (1 cho bình thường, 2 cho võng mạc, v.v. -1 dường như là Mặc định.)

Ảnh chụp màn hình:

Làm mới trang của bạn - bùng nổ, truy vấn phương tiện của bạn hiện đã bắt đầu! Cảm phục Firefox vì sự tuyệt vời để phát triển web! Lưu ý, không chỉ trang web giờ đây sẽ được tăng kích thước lên gấp đôi mà giao diện người dùng Firefox cũng sẽ được tăng gấp đôi. Việc nhân đôi hoặc phóng to này là cần thiết, vì đó là cách duy nhất bạn có thể kiểm tra tất cả các pixel trên màn hình tỷ lệ pixel tiêu chuẩn.

Điều này hoạt động tốt trên Windows 7 với Firefox 21.0 và cả trên Mac OS X với Firefox 27.0.1.

Nếu bạn không sử dụng các truy vấn phương tiện và logic nâng cao khác (tức là bạn đang cung cấp cho mọi người hình ảnh HiDPI), bạn có thể phóng to bằng trình duyệt của mình lên 200%. Trình mô phỏng Chrome là một công cụ hữu ích cũng như nó khởi động các truy vấn phương tiện, nhưng vì nó ngăn cản việc phóng to nên bạn không thể kiểm tra chất lượng hình ảnh.

Phóng to trên Firefox & Edge

Hiện trên Firefox và Edge, nếu bạn thu phóng, nó sẽ kích hoạt các truy vấn phương tiện dựa trên dppx. Vì vậy, cách tiếp cận dễ dàng hơn này có thể là đủ, nhưng lưu ý rằng các chức năng được báo cáo là "sẽ không sửa chữa" lỗi cho Firefox, vì vậy điều này có thể thay đổi.

Trong phiên bản Google Chrome "33.0.1720.0 Canary", giờ đây bạn có thể mô phỏng các thiết bị như iPhone5 và các thiết bị khác với một bộ thông số tuyệt vời như "Tỷ lệ pixel thiết bị", "số liệu phông chữ android" và "Mô phỏng chế độ xem" .

Không cần phải hack Firefox nữa - dù sao thì cũng khó làm việc.

Cảm ơn nhóm nhà phát triển của Google! ! :)

Trong chrome, bạn có thể làm điều đó bằng cách:

1) Mở Công cụ dành cho nhà phát triển Chrome và nhấp vào biểu tượng "bánh răng" nhỏ.

2) Sau đó chọn "Hiển thị chế độ xem 'Mô phỏng' trong ngăn điều khiển."

3) Cuối cùng, mở "ngăn bảng điều khiển" trong Công cụ dành cho nhà phát triển và chọn Mô phỏng . Đặt màn hình Giả lập và đặt Tỷ lệ điểm ảnh thiết bị thành 2,5.

Theo như tôi có thể nói, không thể nào khác ngoài việc mua một thiết bị retina.

Một số cách giải quyết

• Đề xuất ở đây:

  • Nếu bạn tăng gấp đôi kích thước hình ảnh và tỷ lệ vẫn như cũ, bạn khá an toàn. Nếu bạn không có màn hình retina để kiểm tra, hãy chuyển từ truy vấn phương tiện tỷ lệ pixel sang truy vấn dựa trên chiều rộng.

  • Kiểm tra và Khắc phục sự cố Nội dung có độ phân giải cao
    http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html

• Cách phát triển HiDPI (“Retina”) mà không cần MacBook Pro Retina
  http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/

• Hình ảnh Retina của WordPress
  http://wpmu.org/wordpress-retina/

Ít liên quan

• Cách tạo một trang web đáp ứng, sẵn sàng cho Retina

• Cách thiết kế màn hình Retina của Apple
  http://www.studiopress.com/design/retina-display-design.htm

• Xây dựng trang web cho màn hình Retina: Kết bạn với Pixels
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels

• Làm thế nào để phát triển một trang web cho hiển thị võng mạc?

• làm thế nào để chuẩn bị sẵn sàng cho võng mạc?

Phương pháp hiện tại để mô phỏng màn hình Retina (HiDPI) với Google Chrome

1) " Nhấp chuột phải " trên trang web, sau đó chọn " Kiểm tra " để mở Công cụ dành cho nhà phát triển của Chrome

2) Nhấp vào biểu tượng " Chuyển đổi chế độ thiết bị "

3) Trên hộp thả xuống Thiết bị ở đầu màn hình, chọn " Máy tính xách tay có Màn hình HiDPI "

4) Bây giờ bạn có thể xem trang web sẽ trông như thế nào trên màn hình Retina hay còn gọi là HiDPI

Tôi sử dụng thư viện thay đổi kích thước hình ảnh để tạo hình ảnh động. Đối với phiên bản 2x, tôi thêm một hình mờ động trong quá trình gỡ lỗi - điều này giúp bạn rất dễ dàng xem hình ảnh có độ phân giải cao có thực sự được hiển thị hay không. Đã tìm thấy nó rất hữu ích.

Cách thức hoạt động này sẽ khác nhau vì vậy không bao gồm mã mẫu.

Phiên bản Google Chrome 80

1. Mở Công cụ dành cho nhà phát triển ctrl-shift j
2. Chuyển đổi thanh công cụ của thiết bị bằng cách nhấp vào biểu tượng máy tính bảng / điện thoại ở trên cùng bên trái (nó sẽ chuyển sang màu xanh lam nếu bạn nhấp vào)

3. Bây giờ khung nhìn sẽ có một thanh công cụ phía trên nó. Nhấp vào biểu tượng tùy chọn (3 chấm) ở trên cùng bên phải và chọn tùy chọn Thêm tỷ lệ pixel thiết bị .

4. Bây giờ bạn sẽ thấy tùy chọn trên thanh công cụ. Từ đây, bạn có thể chuyển sang 1x, 2x hoặc 3x.

5. Khi bạn đang kiểm tra, hãy đảm bảo rằng bạn nhấn nút làm mới mỗi khi bạn thay đổi tỷ lệ pixel. Nếu bạn đặt tỷ lệ thành 2x và sau đó đặt nó trở lại thấp hơn thì bạn sẽ không thấy bất kỳ thay đổi nào vì trình duyệt sẽ không tìm nạp nội dung 1x nếu nó đã tìm nạp 2x hoặc cao hơn.

Tôi không biết điều này có quá đơn giản không, tôi nhấn ctrl và cuộn và nó kích hoạt truy vấn phương tiện. Tôi đã kiểm tra nó trong bugzilla và nó hoạt động. Tôi không chắc chắn về tỷ lệ svg vì nó có vẻ mờ, nhưng đó là hình ảnh svg.

Nếu bạn có máy Mac (hoặc máy ảo mac osx), bạn có thể sử dụng trình giả lập ios với xcode. nó làm nổ cửa sổ lớn gấp đôi, vì vậy nó không giống như cách nó xuất hiện trong đời thực, nhưng sẽ cho bạn thấy rõ ràng hình ảnh của bạn có bị mờ hay không.