สำรวจการสาธิตนี้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด
เต็มหน้าจอ
- โหลดหน้าเว็บซ้ำโดยใช้อุปกรณ์อื่นเพื่อดูว่าเบราว์เซอร์โหลดต่างกัน รูปภาพ
คุณใช้โปรแกรมจําลองอุปกรณ์เพื่อดำเนินการนี้ได้ หากคุณกำลังมองหา จอแสดงผลที่เฉพาะเจาะจง ความหนาแน่นของอุปกรณ์บางส่วนที่ควรลองใช้มีดังนี้
| ความหนาแน่น 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 โดยเฉพาะอย่างยิ่ง Apple สร้างความฮือฮาครั้งใหญ่ในปี 2010 เมื่อเปิดตัวจอแสดงผลแบบ Retina เหล่านี้ จอแสดงผลมีความละเอียดอย่างน้อย 192 ppi ซึ่งมากกว่า 2 เท่าของความละเอียด "ปกติ" จอแสดงผล (192 ppi/96 ppi = 2)
window.devicePixelRatio
ด้วยการเปิดตัวเทคโนโลยีการแสดงผลที่ใหม่กว่า "พิกเซลของอุปกรณ์" เริ่มแตกต่างออกไป
ในขนาดและรูปร่างจริง
และไม่มีขนาดเท่ากับ "พิกเซล CSS" อีกต่อไป ความจำเป็นในการกำหนด
ความสัมพันธ์ระหว่างขนาดของ "พิกเซลของอุปกรณ์" และ "พิกเซล CSS" คือสาเหตุที่
การเปิดตัว devicePixelRatio (บางครั้งเรียกว่า "CSS Pixel"
อัตราส่วน")
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 พิกเซลของอุปกรณ์ = 1 พิกเซล CSS | กว้าง 250 พิกเซล |
| 2 | 2 พิกเซลของอุปกรณ์ = 1 พิกเซล CSS | กว้าง 500 พิกเซล |
| 3 | 3 พิกเซลของอุปกรณ์ = 1 พิกเซล CSS | กว้าง 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
วิธีใช้
- ใช้อุปกรณ์ PixelRatio และหน่วย
xเพื่อเขียนตัวบอกความหนาแน่น สำหรับ เช่น ข้อบ่งชี้ความหนาแน่นสำหรับหน้าจอ Retina หลายหน้าจอ (window.devicePixelRatio = 2) จะถูกเขียนเป็น2x - หากไม่ได้ระบุตัวบ่งชี้ความหนาแน่น ระบบจะถือว่าเป็น
1x - การรวมตัวบอกความหนาแน่นในชื่อไฟล์ถือเป็นเรื่องปกติ (และจะ ช่วยติดตามไฟล์ต่างๆ) แต่ก็ไม่จำเป็น รูปภาพสามารถมี ชื่อไฟล์
- โดยไม่จำเป็นต้องใส่แอตทริบิวต์
sizesแอตทริบิวต์sizesมีเฉพาะ ที่ใช้กับข้อบ่งชี้ความกว้าง