สำรวจเดโมนี้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- โหลดหน้าเว็บซ้ำโดยใช้อุปกรณ์อื่นเพื่อดูว่าเบราว์เซอร์โหลดรูปภาพที่แตกต่างกันหรือไม่
คุณใช้โปรแกรมจำลองอุปกรณ์ได้ หากกำลังมองหาความหนาแน่นของการแสดงผลที่เฉพาะเจาะจง อุปกรณ์ต่อไปนี้เป็นอุปกรณ์ที่คุณลองใช้ได้
| ความหนาแน่น 1x | 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 พิกเซล = พิกเซล CSS 1 พิกเซล | กว้าง 500 พิกเซล |
| 3 | พิกเซลของอุปกรณ์ 3 พิกเซล = พิกเซล CSS 1 พิกเซล | กว้าง 750 พิกเซล |
สิ่งที่ควรทราบ
- ขนาดพิกเซลที่แสดงในโปรแกรมแก้ไขรูปภาพ ไดเรกทอรีไฟล์ และที่อื่นๆ เป็นการวัดพิกเซลเชิงตรรกะ
- สำหรับหน้าจอที่มีความละเอียดสูงขึ้นและจอแสดงผลขนาดใหญ่ คุณจะต้องมีรูปภาพที่มีขนาดภาพใหญ่ขึ้น การเพิ่มขนาดรูปภาพขนาดเล็กเพียงอย่างเดียวจะขัดต่อวัตถุประสงค์ของการแสดงรูปภาพหลายเวอร์ชัน เบราว์เซอร์จะทำเช่นนี้อยู่แล้วหากไม่ได้ระบุรูปภาพที่มีความละเอียดสูง
ใช้ตัวระบุความหนาแน่นเพื่อแสดงรูปภาพ
หลายรายการ
คุณสามารถใช้ข้อบ่งชี้ความหนาแน่นร่วมกับแอตทริบิวต์ "srcset " เพื่อแสดงรูปภาพที่แตกต่างกันให้กับ devicePixelRatio ที่แตกต่างกัน
- ดูไฟล์
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ใช้กับข้อบ่งชี้ความกว้างเท่านั้น