คุณจัดการเบราว์เซอร์ซูมของลูกค้าอย่างไร

ฉันมีภาพจำนวนมากบนหน้าหนึ่งแกลเลอรี่ ฉันต้องการให้ภาพมีความคมชัดดังนั้นฉันจึงไม่ปรับขนาดเบราว์เซอร์ฉันใช้ขนาดดั้งเดิมของภาพ

อย่างไรก็ตามจะใช้งานได้เฉพาะเมื่อระดับการซูมของเบราว์เซอร์เป็น 100% เมื่อฉันเพิ่มหรือลดระดับการซูมคุณภาพของภาพจะลดลง

ลูกค้าบางรายมีระดับการซูมที่แตกต่างกันตามค่าเริ่มต้น ฉันสงสัยว่าคุณจะจัดการกับมันอย่างไรและเราจะจัดการกับมันได้อย่างไร?

ไชโย

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

โซลูชันที่แนะนำของฉันด้านล่าง แต่ก่อนอื่นนี่คือสี่วิธีที่สามารถเกิดขึ้นได้:

• ที่หายากมากที่สุด: เลือกที่ผู้ใช้สามารถซูมเข้า ไม่ใช่ปัญหาใหญ่นักเนื่องจากเป็นตัวเลือกของพวกเขา
• แปลกใจเหมือนกัน: เบราว์เซอร์ของผู้ใช้ซูมโดยค่าเริ่มต้น ตัวอย่างเช่นเครื่อง Windows ที่มีความหนาแน่นของพิกเซลสูงจะถูกซูมเป็น 125% หรือมากกว่าโดยค่าเริ่มต้นและFirefox เมื่อเร็ว ๆ นี้ (สร้างความสับสน!) ทำให้เกิดกรณีดังกล่าวในกรณีนี้ผู้ใช้จะถูกซูมถึง 100% เมื่อขยายจริงถึง 125%ปล่อยให้พวกเขาเกาหัวสงสัยว่าทำไมทุกอย่างดูเป็นเม็ด ๆ
• ที่พบบ่อยมาก:อุปกรณ์ Android ส่วนใหญ่ (และอุปกรณ์อื่น ๆ ?) มีอัตราส่วนพิกเซลมากกว่า 1 ซึ่งหมายความว่า "CSS pixel" ทุกอันได้รับการแสดงจริงโดยใช้พิกเซลทางกายภาพมากกว่าหนึ่งพิกเซล - ดังนั้นชุดภาพ 200px คูณ 200px ที่width: 200px; height: 200px;จะปรับขนาดจริง รูปภาพ 200px คูณ 200px ซึ่งแสดงผลมากกว่า 200 x 200 พิกเซลทำให้มีเม็ดเล็ก ๆ
• ที่พบบ่อยมาก:อุปกรณ์ Apple ที่ทันสมัยจำนวนมากมี "หน้าจอเรตินา " สิ่งนี้จะเหมือนกับอุปกรณ์ Android ที่มีอัตราส่วนพิกเซล 2 แต่มีการทำการตลาดที่ดีขึ้นและมีคุณสมบัติที่กำหนดเองสองสามอย่างที่อนุญาตให้ตรวจพบโดยใช้ชื่อ

สิ่งเหล่านี้จะส่งผลให้เกิดปัญหาของจอห์นเกี่ยวกับคลังภาพที่ดูเป็นเม็ดเล็ก

ฉันหวังว่าบางคนจะมีทางออกที่ดีสำหรับปัญหานี้ แต่สำหรับตอนนี้ที่นี่คือตัวเลือกที่ฉันต้องการเริ่มต้นด้วยประสิทธิภาพสูงสุด แต่เป็นไปได้น้อยที่สุดในระดับสากล:

1. ถ้าเป็นไปได้ให้ไปที่ vector - SVG (หรือ Raphael.js หากคุณยังต้องการรองรับ IE8) นี่เป็นเพียงตัวเลือกสำหรับไอคอนไดอะแกรมและเป็นตัวเลือกสำหรับภาพถ่าย SVG ที่ซับซ้อนมากยังสามารถแสดงบนโทรศัพท์มือถือระดับล่างเนื่องจากการประมวลผลที่จำเป็น
2. หากเป็นไปได้ให้ตรวจสอบอัตราส่วนพิกเซลของอุปกรณ์และแสดงภาพตามนั้น สิ่งนี้สามารถแก้ปัญหา Firefox บน Windows ได้เนื่องจาก Firefox บน Windows เปลี่ยนการอ่านอัตราส่วนพิกเซลเมื่อซูมเข้าและออก ข้อเสียคือมันกลายเป็นปัญหาการเข้ารหัสที่เกี่ยวข้องกับงานพัฒนาบนเซิร์ฟเวอร์และฝั่งไคลเอ็นต์

3. ถ้า 1. และ 2. เป็นไปไม่ได้, แต่มันสำคัญมากและคุณภาพของภาพนั้นสำคัญกว่า, พูด, เวลาโหลด, เพียงแค่เพิ่มภาพเป็นสองเท่า

   • นี่คือสิ่งที่ Google ทำกับโลโก้ของพวกเขาในหน้าแรกของพวกเขา: พวกเขาบีบภาพ PNG ขนาด 538px x 190px ในภาชนะ 269px x 95px นอกจากนี้ยังมากหรือน้อยเหมือนกับภาพที่ตอบสนองต่อการทำงาน

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

   • ขนาดของการทวีคูณเป็นเรื่องปกติเพราะอุปกรณ์น้อยมากที่มีอัตราส่วนมากกว่า 2 ผู้ใช้น้อยมากถูกซูมมากกว่า 200% และการปรับขนาดภาพ 50% นั้นสะอาดกว่าจำนวนอื่น ๆ
4. หาก 1, 2 เป็นไปไม่ได้และเวลาในการโหลดมีลำดับความสำคัญสูงเกินไปสำหรับ 3 ฉันไม่ทราบถึงตัวเลือกอื่น ๆ และคำแนะนำของฉันคือไม่ต้องกังวลเพราะครึ่งไซต์บนอินเทอร์เน็ตมีปัญหาเดียวกัน และคนที่มีปัญหานี้ในเว็บไซต์ของคุณก็จะมีปัญหานี้ในเว็บไซต์อื่น ๆ นรก Firefox บน Windows พิกเซลปุ่ม UI ของตัวเอง ...

ตามที่DA01 แสดงความคิดเห็นคุณไม่ควรทำอะไรเกี่ยวกับเรื่องนี้

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

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

แน่นอนว่าคุณอาจคิดเป็น 125% หรือ 150% (และคุณอาจไม่จำเป็นต้อง) แต่ 200%, 300% มากกว่านี้? มันไม่สมเหตุสมผลเลย

เกิดอะไรขึ้นถ้าผู้ใช้ใช้ชุดรูปแบบ windows ความคมชัดสูง จะเป็นอย่างไรถ้าพวกเขาใช้แว่นขยายอย่างต่อเนื่อง ใครสน?

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

นี่เป็นเพียงความเห็นของฉัน แต่ บริษัท ที่ฉันทำงานเพื่อบอกลูกค้าอย่างชัดเจนว่าเราไม่สนับสนุนการตั้งค่าการซูม

คนอื่นได้ให้คำแนะนำที่ดีเกี่ยวกับปัญหาที่คุณต้องเผชิญและฉันก็ไม่เก่งพอในเรื่องนี้เพื่อทำการสอนที่ดี แต่ ...

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

เมื่อฉันพยายามทำสิ่งนี้ครั้งสุดท้ายฉันใช้ media-query.js และ picturefill.js ดู: http://responsivedesign.is/resources/images/picture-fill ฉันมีเลย์เอาต์ 3 คอลัมน์ซึ่งบางภาพจะขยายสองคอลัมน์ ... เมื่อหน้าต่างเบราว์เซอร์มีขนาดเล็กพอรูปภาพขนาดใหญ่จะเปลี่ยนเป็นเวอร์ชันความละเอียดที่เล็กกว่าซึ่งจะกว้างเพียงหนึ่งคอลัมน์เท่านั้น เบราว์เซอร์ของผู้ใช้จะโหลดเวอร์ชันของไฟล์ที่ต้องการ (และในกรณีของฉันปลั๊กอินก่ออิฐจะย้ายทุกอย่างเพื่อรองรับ)

แน่นอนว่าผู้ใช้ของคุณต้องเปิดใช้งาน JavaScript ...

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

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

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

โซลูชันปัจจุบันของฉันด้วย CSS มีลักษณะดังนี้:

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
    (-o-min-device-pixel-ratio: 7/4),
    (-webkit-min-device-pixel-ratio: 1.75),
    (min-device-pixel-ratio: 1.75) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
    (-o-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2.00),
    (min-device-pixel-ratio: 2.00) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
        }
}

ขั้นตอนต่อไปคือการใช้คลาสเพื่อกำหนดและกำหนดขนาดรูปภาพอื่นหากจำเป็น ฉันไม่รู้วิธีการรับขนาดภาพแบบไดนามิก ฟังก์ชั่น CSS attr () ดูเหมือนจะไม่ทำงานสำหรับสิ่งนี้

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

อีกครั้งแม้ว่านี่อาจไม่ใช่ stackexchange ที่จะถาม

คุณสามารถทำได้ผ่าน HTML ในส่วนหัวของเว็บไซต์เพิ่มสิ่งนี้

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

นักพัฒนานี้ไม่แนะนำให้ใช้กับเว็บไซต์ทุกประเภท แต่ควรทำสิ่งที่คุณต้องการให้สำเร็จ

หวังว่ามันจะช่วย: การแปลงกฎ css: ปรับขนาดบนแท็กเนื้อหาหรืออื่น ๆ - ไม่สมบูรณ์ดูที่นี่โปรด:

/programming/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741