สำรวจเดโมนี้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- โหลดหน้าเว็บซ้ำโดยใช้อุปกรณ์อื่นเพื่อดูว่าเบราว์เซอร์โหลดรูปภาพที่แตกต่างกันหรือไม่
คุณใช้โปรแกรมจำลองอุปกรณ์ได้ หากคุณกำลังมองหาความหนาแน่นของการแสดงผลที่เจาะจง ลองดูอุปกรณ์ต่อไปนี้
| ความหนาแน่น 1 เท่า | Blackberry Playbook, จอภาพภายนอกหลายจอ |
| ความหนาแน่น 2 เท่า | iPad หรือ iPhone 5/6 |
| ความหนาแน่น 3 เท่า | Galaxy S5 หรือ iPhone X |
- ชำระเงิน
index.htmlสำหรับรหัสที่ใช้ในการดำเนินการนี้
หลักการทำงาน
แนวคิดเกี่ยวกับตัวบ่งชี้ความหนาแน่นอาจไม่คุ้นเคยสำหรับผู้ใช้ส่วนใหญ่ เพื่อให้เข้าใจมากขึ้น การมีข้อมูลเบื้องต้นเกี่ยวกับวิธีการทำงานของเบราว์เซอร์ กับพิกเซลจะเป็นประโยชน์
พิกเซลคืออะไร
มาเริ่มกันตั้งแต่ต้นด้วยการกําหนดว่าพิกเซลคืออะไร ฟังดูง่าย แต่ "พิกเซล" นั้นมีหลายความหมาย
- พิกเซลอุปกรณ์ (หรือที่เรียกว่า "พิกเซลจริง")
- จุดสีที่เล็กที่สุดที่แสดงในอุปกรณ์ได้
- พิกเซลตรรกะ
- ข้อมูลที่ระบุสีในตำแหน่งที่เจาะจงบนตารางกริด พิกเซลประเภทนี้ไม่มีขนาดจริงโดยเนื้อแท้
- พิกเซล CSS
- ข้อกำหนด CSS กำหนดพิกเซลเป็นหน่วยวัดทางกายภาพ 1 พิกเซล = 1/96 ของนิ้ว
ความหนาแน่นพิกเซล
ความหนาแน่นของพิกเซล (หรือที่เรียกว่า "ความหนาแน่นของหน้าจอ" หรือ "ความหนาแน่นของการแสดงผล") จะวัดความหนาแน่นของพิกเซลของอุปกรณ์ในพื้นที่ทางกายภาพหนึ่งๆ ซึ่งโดยทั่วไปจะวัดโดยใช้พิกเซลต่อนิ้ว (ppi)
เป็นเวลาหลายปีมาแล้วที่ 96 ppi คือความหนาแน่นของการแสดงผลที่พบได้ทั่วไป (ดังนั้น CSS จึงกำหนดพิกเซลเท่ากับ 1/96 ของนิ้ว) ตั้งแต่ปี 1980 ความละเอียดนี้เป็นความละเอียดเริ่มต้นของ Windows นอกจากนี้ ยังเป็นความละเอียดของจอภาพ CRT ด้วย
ซึ่งเริ่มเปลี่ยนไปเมื่อจอ LED เริ่มมีการใช้งานกันทั่วไปในช่วงทศวรรษที่ 2000 โดยเฉพาะอย่างยิ่งในปี 2010 Apple สร้างความตื่นตาตื่นใจอย่างมากเมื่อเปิดตัวจอแสดงผล Retina จอแสดงผลดังกล่าวมีความละเอียดขั้นต่ำที่ 192 ppi ซึ่งมากกว่าความละเอียดของหน้าจอแบบ "ปกติ" ถึง 2 เท่า (192 ppi/96 ppi = 2)
window.devicePixelRatio
การเปิดตัวเทคโนโลยีการแสดงผลรุ่นใหม่ทำให้ "พิกเซลของอุปกรณ์" เริ่มมีขนาดทางกายภาพและรูปร่างแตกต่างกัน และไม่มีขนาดเท่ากับ "พิกเซล CSS" อีกต่อไป ความจำเป็นต้องระบุความสัมพันธ์ระหว่างขนาด "พิกเซลของอุปกรณ์" กับ "พิกเซล CSS" เป็นจุดที่นำไปสู่การเริ่มใช้ devicePixelRatio (บางครั้งเรียกว่า "อัตราส่วนพิกเซลของ CSS")
devicePixelRatio กำหนดความสัมพันธ์ระหว่างพิกเซลของอุปกรณ์กับพิกเซล CSS สำหรับอุปกรณ์หนึ่งๆ อุปกรณ์ 192 ppi มี devicePixelRatio เท่ากับ 2 (192 ppi/96 ppi = 2) เนื่องจาก "2 พิกเซลการแสดงผลมีขนาดเท่ากับ 1 พิกเซล CSS"
ปัจจุบันอุปกรณ์ส่วนใหญ่มีอัตราส่วนพิกเซลของอุปกรณ์ระหว่าง 1.0 ถึง 4.0
กำหนดความหนาแน่นของพิกเซลของอุปกรณ์โดยพิมพ์
window.devicePixelRatioในคอนโซลดูตารางนี้เพื่อดูอัตราส่วนพิกเซลของอุปกรณ์ทั่วไป โดยส่วนใหญ่จะอยู่ระหว่าง 1.0 ถึง 4.0
แล้วคุณจะนำข้อมูลนี้ไปใช้จริงได้อย่างไร
ปรับขนาดรูปภาพตามอัตราส่วนพิกเซลของอุปกรณ์
คุณต้องระบุรูปภาพเวอร์ชันต่างๆ สำหรับ devicePixelRatios ที่แตกต่างกันเพื่อให้รูปภาพดูดีที่สุดบนหน้าจอที่มีความละเอียดสูง
| อัตราส่วนพิกเซลของอุปกรณ์ | บ่งบอกว่า | ในอุปกรณ์นี้ แท็ก <img> ที่มี CSS กว้าง 250 พิกเซลจะดูดีที่สุดเมื่อรูปภาพต้นฉบับมีขนาด... |
|---|---|---|
| 1 | พิกเซลของอุปกรณ์ 1 พิกเซล = พิกเซล CSS 1 พิกเซล | กว้าง 250 พิกเซล |
| 2 | 2 พิกเซลของอุปกรณ์ = 1 พิกเซล CSS | กว้าง 500 พิกเซล |
| 3 | พิกเซลของอุปกรณ์ 3 พิกเซล = พิกเซล CSS 1 พิกเซล | กว้าง 750 พิกเซล |
สิ่งที่ควรทราบ
- ขนาดพิกเซลที่แสดงในโปรแกรมแก้ไขรูปภาพ ไดเรกทอรีไฟล์ และตำแหน่งอื่นๆ เป็นการวัดพิกเซลเชิงตรรกะ
- สำหรับหน้าจอที่มีความละเอียดสูงขึ้นและจอแสดงผลขนาดใหญ่ คุณจะต้องมีรูปภาพที่มีขนาดภาพใหญ่ขึ้น การเพิ่มขนาดรูปภาพขนาดเล็กเพียงอย่างเดียวจะทําให้เสียวัตถุประสงค์ของการแสดงรูปภาพหลายเวอร์ชัน เบราว์เซอร์จะทำเช่นนี้อยู่แล้วหากไม่ได้ระบุรูปภาพที่มีความละเอียดสูง
ใช้ตัวบอกความหนาแน่นเพื่อแสดงรูปภาพ
หลายรูป
คุณสามารถใช้ตัวบอกความหนาแน่นร่วมกับแอตทริบิวต์ "srcset " เพื่อแสดงรูปภาพต่างๆ ไปยังอุปกรณ์ PixelRatios ที่แตกต่างกัน
- ตรวจสอบไฟล์
index.htmlและจดบันทึกองค์ประกอบ<img>
<img src="flower.jpg"
srcset="flower-1x.jpg 1x,
flower-2x.jpg 2x,
flower-3x.jpg 3x">
ตัวอย่างนี้แสดงเป็นข้อความ
1x,2xและ3xทั้งหมดเป็นข้อบ่งชี้ความหนาแน่นที่บอกเบราว์เซอร์เกี่ยวกับความหนาแน่นของพิกเซลที่รูปภาพมีไว้สำหรับแสดง ซึ่งจะช่วยป้องกันไม่ให้เบราว์เซอร์ ต้องดาวน์โหลดรูปภาพเพื่อระบุข้อมูลนี้- เบราว์เซอร์สามารถเลือกระหว่างรูปภาพ 3 รูป ได้แก่
flower-1x.jpg(สำหรับเบราว์เซอร์ที่มีความหนาแน่น1.0พิกเซล),flower-2x.jpg(เหมาะสำหรับเบราว์เซอร์ที่มีความหนาแน่นพิกเซล2.0) และflower-3x.jpg(เหมาะสำหรับเบราว์เซอร์ที่มีความหนาแน่นพิกเซล3.0) flower.jpgคือรูปภาพสำรองสำหรับเบราว์เซอร์ที่ไม่รองรับsrcset
วิธีใช้
- ใช้ devicePixelRatio และหน่วย
xเพื่อเขียนตัวบ่งชี้ความหนาแน่น เช่น ตัวบอกความหนาแน่นสำหรับหน้าจอ Retina หลายหน้าจอ (window.devicePixelRatio = 2) จะเขียนเป็น2x - หากไม่ได้ระบุตัวบ่งชี้ความหนาแน่น ระบบจะถือว่าเป็น
1x - การใส่ตัวบ่งชี้ความหนาแน่นในชื่อไฟล์เป็นแนวทางปฏิบัติทั่วไป (และจะช่วยให้คุณติดตามไฟล์ได้) แต่ก็ไม่จำเป็น รูปภาพมีชื่อไฟล์ใดก็ได้
- โดยไม่จำเป็นต้องใส่แอตทริบิวต์
sizesแอตทริบิวต์sizesใช้กับข้อบ่งชี้ความกว้างเท่านั้น