จะทดสอบเว็บไซต์สำหรับ Retina บน Windows โดยไม่มีจอภาพ Retina จริงได้อย่างไร?

มีวิธีจำลองจอภาพ Retina บน Windows เพื่อทดสอบเว็บไซต์สำหรับจอแสดงผล HiDPI เช่น Retina หรือไม่?

ฉันใช้ Windows บนจอภาพมาตรฐานขนาด 24 นิ้ว 1920x1080 เมื่อคืนที่ผ่านมาฉันตรวจสอบเว็บไซต์ของฉันใน Retina MacBook Pro 15 "ใหม่เอี่ยมของเพื่อนและกราฟิกดูเบลอไปหมด (แย่กว่า MacBook 15 นิ้วทั่วไป) ในขณะที่แบบอักษรเป็น สุดยอดและคมชัดทำให้โลโก้ดูแย่ลงเนื่องจากการเปรียบเทียบโดยตรง

ฉันได้ทำตามบทช่วยสอนนี้เพื่อทำให้เว็บไซต์ของฉันพร้อมสำหรับ Retina:

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

ฉันใช้วิธี retina.js เนื่องจากฉันไม่มีภาพพื้นหลังเลย

มีวิธีใดบ้างที่ฉันจะทดสอบว่าใช้งานได้จริงหรือไม่? เห็นได้ชัดว่าฉันสามารถขอให้เพื่อนใช้ Retina Notebook ของเขาได้ แต่นั่นไม่ใช่ขั้นตอนการทำงานที่เป็นไปได้สำหรับฉัน ฉันต้องการทดสอบเว็บไซต์สำหรับความเข้ากันได้ของ Retina ในสภาพแวดล้อมของฉันเองเป็นอย่างน้อย

เกี่ยวกับ: config hack บน Firefox

คุณสามารถใช้ Firefox:

1. ไปที่ "about: config"
2. ค้นหา "layout.css.devPixelsPerPx
3. เปลี่ยนเป็นอัตราส่วนที่คุณต้องการ (1 สำหรับปกติ 2 สำหรับเรตินา ฯลฯ -1 ดูเหมือนจะเป็นค่าเริ่มต้น)

ภาพหน้าจอ:

รีเฟรชหน้าของคุณ - บูมแบบสอบถามสื่อของคุณเริ่มต้นแล้ว! ปิดการใช้งาน Firefox เพื่อความยอดเยี่ยมสำหรับการพัฒนาเว็บ! โปรดทราบว่าไม่เพียง แต่ตอนนี้เว็บไซต์จะได้รับการเพิ่มขนาดเป็นสองเท่าแล้ว UI ของ Firefox จะเพิ่มขึ้นเป็นสองเท่า จำเป็นต้องเพิ่มหรือซูมเป็นสองเท่าเนื่องจากเป็นวิธีเดียวที่คุณจะสามารถตรวจสอบพิกเซลทั้งหมดบนหน้าจออัตราส่วนพิกเซลมาตรฐานได้

ทำงานได้ดีบน Windows 7 ที่มี Firefox 21.0 และบน Mac OS X ที่มี Firefox 27.0.1

หากคุณไม่ได้ใช้แบบสอบถามสื่อและตรรกะขั้นสูงอื่น ๆ (เช่นคุณกำลังป้อนภาพ HiDPI ทุกคน) คุณสามารถซูมเข้าด้วยเบราว์เซอร์ของคุณเป็น 200% การจำลอง Chrome เป็นเครื่องมือที่มีประโยชน์และใช้ในการค้นหาสื่อ แต่เนื่องจากป้องกันการซูมคุณจึงไม่สามารถตรวจสอบคุณภาพของภาพได้

ซูมบน Firefox & Edge

ขณะนี้บน Firefox และ Edge หากคุณซูมจะทำให้เกิดการสืบค้นสื่อที่ใช้ dppx ดังนั้นแนวทางที่ง่ายกว่านี้อาจเพียงพอ แต่โปรดทราบว่าฟังก์ชันนี้ได้รับการรายงานว่าเป็นข้อบกพร่อง "ไม่แก้ไข" สำหรับ Firefox ดังนั้นสิ่งนี้อาจเปลี่ยนแปลงได้

ในรุ่นของ Google Chrome "33.0.1720.0 เกาะคานารี่" ตอนนี้คุณสามารถอุปกรณ์เลียนแบบเช่น iPhone5 และคนอื่น ๆ ที่มีชุดใหญ่ของพารามิเตอร์เช่น "อัตราส่วนอุปกรณ์พิกเซล", "ตัวชี้วัดอักษรหุ่นยนต์" และ "วิวพอร์ตจำลอง"

ไม่จำเป็นต้องแฮ็ก Firefox อีกต่อไป - ยากที่จะทำงานด้วยอย่างไรก็ตาม

ขอบคุณทีมนักพัฒนา Google! ! :)

ใน Chrome คุณสามารถทำได้โดย:

1) เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome และคลิกที่ไอคอน "เฟือง" เล็ก ๆ

2) จากนั้นเลือก "แสดงมุมมอง 'การจำลอง' ในลิ้นชักคอนโซล"

3) สุดท้ายเปิด "คอนโซลลิ้นชัก" ในเครื่องมือสำหรับนักพัฒนาและเลือกEmulation ตั้งค่าหน้าจอจำลองและตั้งค่าDevice Pixel Ratioเป็น 2.5

เท่าที่ฉันสามารถบอกได้ว่าเป็นไปไม่ได้นอกจากการซื้ออุปกรณ์เรตินา

วิธีแก้ปัญหาบางอย่าง

• แนะนำที่นี่:

  • หากคุณเพิ่มขนาดและสัดส่วนของภาพเป็นสองเท่าคุณก็ปลอดภัยมาก หากคุณไม่มีจอแสดงผลเรติน่าให้ทดสอบให้เปลี่ยนจากคิวรีสื่อที่มีอัตราส่วนพิกเซลไปเป็นการใช้ความกว้าง

  • การทดสอบและการแก้ไขปัญหาเนื้อหาความละเอียดสูง
    http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html

• วิธีพัฒนาสำหรับ HiDPI (“ Retina”) โดยไม่ใช้ Retina MacBook Pro
  http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/

• รูปภาพ Retina ของ WordPress
  http://wpmu.org/wordpress-retina/

เกี่ยวข้องน้อยกว่า

• วิธีสร้างเว็บไซต์ที่ตอบสนองต่อ Retina-ready

• วิธีออกแบบจอภาพ Retina ของ Apple
  http://www.studiopress.com/design/retina-display-design.htm

• การสร้างเว็บไซต์สำหรับจอภาพ Retina: การสร้างเพื่อนด้วยพิกเซล
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels

• จะพัฒนาเว็บไซต์สำหรับจอภาพเรตินาได้อย่างไร?

• วิธีการเตรียมเรตินา

วิธีปัจจุบันในการจำลองจอภาพ Retina (HiDPI) ด้วย Google Chrome

1) " คลิกขวา " บนหน้าเว็บจากนั้นเลือก " ตรวจสอบ " เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome

2)คลิกไอคอน" Toggle Device Mode "

3)ในกล่องดรอปดาวน์อุปกรณ์ที่ด้านบนของหน้าจอให้เลือก " แล็ปท็อปที่มีหน้าจอ HiDPI "

4)ตอนนี้คุณสามารถดูว่าเว็บไซต์จะมีลักษณะอย่างไรบนหน้าจอ Retina หรือที่เรียกว่า HiDPI

ฉันใช้ไลบรารีการปรับขนาดรูปภาพเพื่อสร้างรูปภาพแบบไดนามิก สำหรับเวอร์ชัน 2x ฉันจะเพิ่มลายน้ำแบบไดนามิกระหว่างการดีบักซึ่งทำให้ง่ายมากที่จะดูว่ารูปภาพความละเอียดสูงกำลังแสดงอยู่หรือไม่ พบว่ามีประโยชน์มาก

วิธีการทำงานจะแตกต่างกันไปโดยไม่รวมโค้ดตัวอย่าง

Google Chrome เวอร์ชัน 80

1. เปิดเครื่องมือสำหรับนักพัฒนา ctrl-shift j
2. สลับแถบเครื่องมืออุปกรณ์โดยคลิกที่ไอคอนแท็บเล็ต / โทรศัพท์ที่ด้านบนซ้าย (จะเปลี่ยนเป็นสีน้ำเงินหากคุณคลิก)

3. ตอนนี้วิวพอร์ตควรมีแถบเครื่องมือด้านบน คลิกไอคอนตัวเลือก (3 จุด) ที่ด้านบนขวาและเลือกเพิ่มอุปกรณ์อัตราส่วนพิกเซลตัวเลือก

4. ตอนนี้คุณควรเห็นตัวเลือกบนแถบเครื่องมือ จากตรงนี้คุณสามารถเปลี่ยนเป็น 1x, 2x หรือ 3x ได้

5. เมื่อคุณทำการทดสอบให้แน่ใจว่าคุณกดปุ่มรีเฟรชทุกครั้งที่คุณเปลี่ยนอัตราส่วนพิกเซล หากคุณตั้งค่าอัตราส่วนเป็น 2x แล้วตั้งค่ากลับเป็นต่ำลงคุณจะไม่เห็นการเปลี่ยนแปลงใด ๆ เนื่องจากเบราว์เซอร์จะไม่ดึงข้อมูล 1x หากมีการดึงข้อมูล 2x หรือสูงกว่าแล้ว

ฉันไม่รู้ว่ามันง่ายเกินไปหรือเปล่าฉันกด ctrl แล้วเลื่อนและเรียกใช้งานการสืบค้นสื่อ ฉันตรวจสอบแล้วใน bugzilla และใช้งานได้ ฉันไม่แน่ใจเกี่ยวกับการปรับขนาด svg เนื่องจากมันดูพร่ามัว แต่เป็นภาพ svg

หากคุณมีเครื่องเสมือน mac (หรือ mac osx) คุณสามารถใช้โปรแกรมจำลอง ios กับ xcode ได้ มันทำให้หน้าต่างใหญ่ขึ้นเป็นสองเท่าดังนั้นมันจึงไม่ใช่สิ่งที่ปรากฏในชีวิตจริง แต่จะแสดงให้คุณเห็นอย่างชัดเจนว่าภาพของคุณเบลอหรือไม่