สิ่งนี้ได้กล่าวถึงทุกบทความเกี่ยวกับเว็บบนมือถือ แต่ไม่มีที่ไหนที่ฉันจะพบคำอธิบายว่าคุณลักษณะนี้วัดได้อย่างไร
ทุกคนสามารถอธิบายรายละเอียดคำสั่งเช่นนี้ได้หรือไม่

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

คำตอบสั้น ๆ

อัตราส่วนพิกเซลของอุปกรณ์คืออัตราส่วนระหว่างพิกเซลทางกายภาพและพิกเซลเชิงตรรกะ ตัวอย่างเช่น iPhone 4 และ iPhone 4S รายงานอัตราส่วนพิกเซลอุปกรณ์ 2 เนื่องจากความละเอียดเชิงเส้นเชิงกายภาพเป็นสองเท่าของความละเอียดเชิงเส้นเชิงตรรกะ

• ความละเอียดทางกายภาพ: 960 x 640
• ความละเอียดเชิงตรรกะ: 480 x 320

สูตรคือ:

ที่ไหน:

คือความละเอียดเชิงเส้นทางกายภาพ

และ:

เป็นความละเอียดเชิงเส้นเชิงตรรกะ

อุปกรณ์อื่น ๆ รายงานอัตราส่วนพิกเซลอุปกรณ์ที่แตกต่างกันรวมถึงค่าที่ไม่ใช่จำนวนเต็ม ยกตัวอย่างเช่นโนเกีย Lumia 1020 รายงาน 1.6667 ที่ Samsumg Galaxy S4 รายงาน 3 และ iPhone ของ Apple 6 พลัสรายงาน 2.46 (ที่มา: dpilove ) แต่สิ่งนี้จะไม่เปลี่ยนแปลงอะไรในหลักการตามที่คุณไม่ควรออกแบบสำหรับอุปกรณ์เฉพาะใด ๆ

อภิปรายผล

CSS "พิกเซล" ไม่ได้ถูกกำหนดเป็น "องค์ประกอบภาพหนึ่งภาพในบางหน้าจอ" แต่เป็นการวัดเชิงมุมที่ไม่ใช่เชิงเส้นของมุมมองภาพซึ่งมีความยาวประมาณหนึ่งนิ้วที่ความยาวแขน ที่มา: CSS ความยาวสัมบูรณ์

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

หากคุณติดอยู่กับภาพบิตแมปเพื่อรองรับอัตราส่วนพิกเซลอุปกรณ์ที่แตกต่างกันจำนวนมากคุณควรใช้CSS Media Queriesเพื่อให้ชุดทรัพยากรที่แตกต่างกันสำหรับกลุ่มอุปกรณ์ที่แตกต่างกัน รวมสิ่งนี้เข้ากับเทคนิคที่ดีเช่นbackground-size: coverหรือตั้งค่าเป็นbackground-sizeเปอร์เซ็นต์อย่างชัดเจน

ตัวอย่าง

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

วิธีนี้อุปกรณ์แต่ละประเภทจะโหลดทรัพยากรอิมเมจที่ถูกต้องเท่านั้น โปรดทราบว่าpxหน่วยใน CSS จะทำงานกับพิกเซลแบบลอจิคัลเสมอ

กรณีสำหรับกราฟิกแบบเวกเตอร์

เมื่ออุปกรณ์ปรากฏมากขึ้นมันก็ยิ่งยากที่จะจัดหาทรัพยากรบิตแมปที่เพียงพอให้พวกเขาทั้งหมด ใน CSS แบบสอบถามสื่อเป็นวิธีเดียวและใน HTML5 องค์ประกอบรูปภาพช่วยให้คุณใช้แหล่งข้อมูลที่แตกต่างกันสำหรับแบบสอบถามสื่อต่าง ๆ แต่การสนับสนุนยังคงไม่ 100% เนื่องจากนักพัฒนาเว็บส่วนใหญ่ยังคงต้องสนับสนุน IE11 อีกครั้ง( แหล่งที่มา: caniuse )

หากคุณต้องการภาพที่คมชัดสำหรับไอคอน, ไลน์อาร์ต, องค์ประกอบการออกแบบที่ไม่ใช่ภาพถ่ายคุณต้องเริ่มคิดเกี่ยวกับ SVG ซึ่งปรับขนาดได้อย่างสวยงามตามความละเอียดทั้งหมด

อัตราส่วนพิกเซลอุปกรณ์ == CSS พิกเซลอัตราส่วน

ในโลกของการพัฒนาเว็บอัตราส่วนพิกเซลของอุปกรณ์ (เรียกอีกอย่างว่า CSS Pixel Ratio) คือสิ่งที่กำหนดว่า CSS จะตีความความละเอียดหน้าจอของอุปกรณ์อย่างไร

CSS ของเบราว์เซอร์คำนวณความละเอียดตรรกะ (หรือตีความ) ของอุปกรณ์ตามสูตร:

ตัวอย่างเช่น:

Apple iPhone 6s

• ความละเอียดจริง: 750 x 1334
• CSS Pixel Ratio: 2
• การแก้ปัญหาเชิงตรรกะ:

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

ตัวอย่างอื่น ๆ :

Samsung Galaxy S4

• ความละเอียดจริง: 1080 x 1920
• CSS Pixel Ratio: 3
• การแก้ปัญหาเชิงตรรกะ:

ไอโฟน 5 เอส

• ความละเอียดจริง: 640 x 1136
• CSS Pixel Ratio: 2
• การแก้ปัญหาเชิงตรรกะ:

ทำไมอัตราส่วนพิกเซลของอุปกรณ์จึงมีอยู่

สาเหตุที่อัตราส่วนพิกเซล CSS ถูกสร้างขึ้นเนื่องจากเมื่อหน้าจอโทรศัพท์ได้รับความละเอียดที่สูงขึ้นหากอุปกรณ์ทุกเครื่องยังมีอัตราส่วนพิกเซล CSS ที่ 1 แล้วหน้าเว็บจะเล็กเกินไปที่จะมองเห็น

จอภาพเดสก์ท็อปเต็มหน้าจอทั่วไปมีความละเอียดประมาณ 24 นิ้วที่ 1920x1080 ลองจินตนาการว่าจอภาพนั้นหดลงเหลือประมาณ 5 นิ้ว แต่มีความละเอียดเท่ากัน การดูสิ่งต่าง ๆ บนหน้าจอจะเป็นไปไม่ได้เพราะพวกมันจะเล็กมาก แต่ผู้ผลิตกำลังออกมาด้วยหน้าจอโทรศัพท์ความละเอียด 1920x1080 อย่างต่อเนื่องในขณะนี้

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

นี่คือเครื่องมือที่บอกความหนาแน่นพิกเซลของอุปกรณ์ปัจจุบันของคุณ:

http://bjango.com/articles/min-device-pixel-ratio/

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-moz-device-pixel-ratio
ให้จำนวนพิกเซลอุปกรณ์ต่อพิกเซล CSS

นี่เป็นการอธิบายตนเอง ตัวเลขอธิบายอัตราส่วนของจำนวนพิกเซล "ของจริง" (ฟิกเกอร์ทางกายภาพของหน้าจอ) ที่ใช้ในการแสดงหนึ่งพิกเซล "เสมือน" (ขนาดที่กำหนดใน CSS)

บทความของ Boris Smus ภาพความละเอียดสูง DPI สำหรับความหนาแน่นของพิกเซลแปรผันนั้นมีความหมายที่แม่นยำยิ่งขึ้นเกี่ยวกับอัตราส่วนพิกเซลของอุปกรณ์: จำนวนพิกเซลของอุปกรณ์ต่อพิกเซล CSS นั้นเป็นการประมาณที่ดี แต่ไม่ใช่เรื่องราวทั้งหมด

โปรดทราบว่าคุณจะได้รับ DPR window.devicePixelRatioโดยใช้อุปกรณ์ที่มี