สำรวจเดโมนี้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- โหลดหน้าเว็บซ้ำโดยใช้อุปกรณ์ต่างๆ เพื่อดูเบราว์เซอร์โหลดรูปภาพที่แตกต่างกัน
คุณใช้โปรแกรมจำลองอุปกรณ์เพื่อดำเนินการนี้ได้ หากคุณกำลังมองหาความหนาแน่นของการแสดงผลที่เฉพาะเจาะจง ต่อไปนี้คืออุปกรณ์บางส่วนที่ควรลองใช้
| ความหนาแน่น 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 ของนิ้ว) โดยเริ่มใช้เป็นความละเอียดเริ่มต้นของ Windows ในช่วงทศวรรษ 1980 นอกจากนี้ ยังเป็นความละเอียดของจอภาพ CRT ด้วย
ซึ่งเริ่มเปลี่ยนไปเมื่อจอภาพ LED ได้รับความนิยมในช่วงทศวรรษ 2000 โดยเฉพาะอย่างยิ่ง Apple ได้สร้างความฮือฮาอย่างมากในปี 2010 เมื่อเปิดตัวจอแสดงผล 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 พิกเซลมีขนาดเท่ากับพิกเซล CSS 1 พิกเซล"
ปัจจุบันอุปกรณ์ส่วนใหญ่มีอัตราส่วนพิกเซลของอุปกรณ์อยู่ระหว่าง 1.0 ถึง 4.0
ตรวจสอบความหนาแน่นของพิกเซลในอุปกรณ์โดยพิมพ์
window.devicePixelRatioในคอนโซลดูตารางนี้เพื่อดูอัตราส่วนพิกเซลของอุปกรณ์ทั่วไป ส่วนใหญ่จะอยู่ระหว่าง 1.0 ถึง 4.0
แล้วคุณจะนำข้อมูลนี้ไปใช้จริงได้อย่างไร
ปรับขนาดรูปภาพตามอัตราส่วนพิกเซลของอุปกรณ์
เพื่อให้รูปภาพดูดีที่สุดบนหน้าจอความละเอียดสูง คุณต้องระบุรูปภาพเวอร์ชันต่างๆ สำหรับ devicePixelRatios ที่แตกต่างกัน
| อัตราส่วนพิกเซลของอุปกรณ์ | ระบุว่า | ในอุปกรณ์นี้ แท็ก <img> ที่มีความกว้าง CSS 250 พิกเซลจะดูดีที่สุดเมื่อรูปภาพต้นฉบับมีขนาด... |
|---|---|---|
| 1 | 1 พิกเซลของอุปกรณ์ = 1 พิกเซล CSS | กว้าง 250 พิกเซล |
| 2 | 2 พิกเซลของอุปกรณ์ = 1 พิกเซล CSS | กว้าง 500 พิกเซล |
| 3 | 3 พิกเซลของอุปกรณ์ = 1 พิกเซล CSS | กว้าง 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ใช้กับข้อบ่งชี้ความกว้างเท่านั้น