आप क्लाइंट के ब्राउज़र ज़ूम को कैसे संभालते हैं?

Question

मेरे पास पृष्ठ, गैलरी पर बहुत सारी छवियां हैं। मैं चाहता हूं कि छवियां तेज रहें, इसलिए मैं कोई ब्राउज़र स्केलिंग नहीं करता, मैं छवि के मूल आयामों का उपयोग करता हूं।

हालाँकि, यह तभी काम करता है जब ब्राउज़र जूम का स्तर 100% हो। जब मैं ज़ूम स्तर बढ़ाता या घटाता हूं, तो छवियों की गुणवत्ता घट जाती है।

कुछ क्लाइंट वास्तव में डिफ़ॉल्ट रूप से अलग ज़ूम स्तर रखते हैं। मैं सोच रहा था, आप इसे कैसे संभाल सकते हैं और क्या हम इसे पूरी तरह से संभाल सकते हैं?

चियर्स

Comments

महान सवाल, यह कुछ ऐसा है जो मुझे अक्सर परेशान करता है। यह आलेख उपयोगी पृष्ठभूमि पढ़ने के लिए है , लेकिन मैंने अभी तक इसका कोई सटीक उत्तर नहीं देखा है, निश्चित चौड़ाई और ऊंचाइयों के साथ x2 आकार की छवियों में डालने और ब्राउज़र को इसे छाँटने की अनुमति देता है (स्पष्ट डाउनसाइड है, लेकिन यह और पिक्सेल घनत्व मुद्दों को ठीक करता है )।

— user56reinstatemonica8

मुझे यकीन नहीं है कि आप किस तरह के जवाब की उम्मीद करते हैं जाहिर है, आप ऑटो आकार बदलने का उपयोग नहीं करना चाहते हैं। क्या आप पूछ रहे हैं कि ब्राउज़र को छवियों को आकार देने से कैसे रोका जाए ताकि मूल छवि आकार के आसपास अन्य तत्वों को व्यवस्थित किया जा सके? प्रत्येक संभव ज़ूम स्तर के लिए तैयार छवियों को स्वचालित रूप से कैसे वितरित करें? या आपके मन में क्या है? इसके अलावा, आप ऐसा क्यों करना चाहते हैं? यदि किसी उपयोगकर्ता को मूल ज़ूम पर पेज को ठीक से देखने में कठिनाई होती है, तो वे शायद ज़ूम के बाद तेज और ऑटो-आकार के बीच अंतर को नोटिस नहीं करेंगे।

— रूमी पी।

आप इसे नहीं संभालते। यह एक उपयोगकर्ता प्राथमिकता है। इसके साथ हस्तक्षेप करने की आवश्यकता नहीं है।

— 1501 बजे DA01

वह यह नहीं पूछ रहा है कि उपयोगकर्ता की वरीयताओं में हस्तक्षेप कैसे करें। वह कैसे तथ्य यह है कि उन का एक बहुत संभाल करने के लिए पूछ रहा है कर रहे हैं डिफ़ॉल्ट रूप से जूम, और इसलिए दानेदार छवियों मिल जाएगा अगर छवियों को उनके मूल आयाम पर हैं।

— user56reinstatemonica8

@ user568458 हाँ। यह वैसे काम करता है। वहाँ वास्तव में संभाल करने के लिए कुछ भी नहीं है।

— DA01

Answer 1

मुझे लगता है कि अधिकांश अन्य उत्तर इस बिंदु से चूक गए हैं: यह उपयोगकर्ता की वरीयताओं को ओवरराइड करने के बारे में नहीं है, यह उपयोगकर्ता के डिवाइस के सामान्य परिदृश्य में सबसे अच्छी गुणवत्ता वाली छवियां देने के बारे में है जो प्रत्येक सीएसएस पिक्सेल उर्फ ​​" संदर्भ पिक्सेल " के लिए एक से अधिक भौतिक पिक्सेल असाइन करते हैं। "आपकी छवि में, जिसके परिणामस्वरूप ब्राउज़र छवि को स्केलिंग करता है, इसे पिक्सेलयुक्त और दानेदार बनाता है।

नीचे दिए गए मेरे समाधानों का सुझाव दिया गया है, लेकिन पहले यहां चार तरीके दिए जा सकते हैं:

• सबसे दुर्लभ: उपयोगकर्ता ज़ूम इन करना चुनता है । इतनी बड़ी समस्या नहीं है, क्योंकि यह उनकी पसंद है।
• आश्चर्यजनक रूप से सामान्य: उपयोगकर्ता का ब्राउज़र डिफ़ॉल्ट रूप से ज़ूम इन होता है । उदाहरण के लिए, कई उच्च पिक्सेल घनत्व वाले विंडोज मशीनों को डिफ़ॉल्ट रूप से 125% या उससे अधिक ज़ूम किया जाता है, और फ़ायरफ़ॉक्स ने हाल ही में (भ्रामक है!) ऐसा इसलिए किया है कि इन मामलों में यह उपयोगकर्ताओं को बताता है कि वे 100% तक ज़ूम किए जाते हैं जब वे वास्तव में 125% तक ज़ूम होते हैं। , उन्हें अपने सिर को खरोंच करते हुए सोचता है कि सब कुछ अचानक दानेदार क्यों दिखता है।
• बहुत सामान्य: अधिकांश एंड्रॉइड डिवाइस (और अन्य डिवाइस?) का पिक्सेल अनुपात 1 से अधिक है। इसका मतलब है कि प्रत्येक "सीएसएस पिक्सेल" वास्तव में एक से अधिक भौतिक पिक्सेल का उपयोग करके प्रदर्शित होता है - इसलिए 200px से 200px छवि सेट width: 200px; height: 200px;वास्तव में स्केल होगा 200px से 200 x 200 पिक्सेल से अधिक 200x तक छवि, संभवतः इसे दानेदार बना रही है।
• बहुत ही सामान्य: कई आधुनिक एप्पल उपकरणों में " रेटिना डिस्प्ले " होता है। यह अनिवार्य रूप से 2 के पिक्सेल अनुपात के साथ एक एंड्रॉइड डिवाइस के समान है, लेकिन बेहतर विपणन के साथ, और कुछ कस्टम गुण जो इसे नाम से पता लगाने की अनुमति देते हैं।

इनमें से कोई भी जॉन को आश्चर्यजनक रूप से दानेदार दिखने वाली छवियों की एक गैलरी की समस्या का परिणाम देगा।

---

मैं उम्मीद कर रहा था कि किसी को इस समस्या का बहुत अच्छा समाधान मिलेगा, लेकिन अब यहाँ मेरे पसंदीदा विकल्प हैं, सबसे प्रभावी लेकिन कम से कम सार्वभौमिक रूप से शुरू करना:

1. यदि संभव हो तो, वेक्टर पर जाएं - एसवीजी (या राफेल.जेएस यदि आपको अभी भी IE8 का समर्थन करने की आवश्यकता है)। वास्तविक रूप से, यह केवल आइकन, आरेख आदि के लिए एक विकल्प है, और यह तस्वीरों के लिए एक विकल्प नहीं है। बहुत ही जटिल एसवीजी आवश्यक प्रसंस्करण के कारण कम-अंत वाले मोबाइलों पर भी स्पष्ट हो सकता है।
2. यदि संभव हो, तो डिवाइस के पिक्सेल अनुपात का पता लगाएं, और उसके आधार पर छवियों की सेवा करें। यह फ़ायरफ़ॉक्स को विंडोज समस्या पर भी हल कर सकता है क्योंकि विंडोज पर फ़ायरफ़ॉक्स पिक्सेल पिक्सेल अनुपात के पढ़ने को बदल देता है जब यह अंदर और बाहर ज़ोम्स करता है। नकारात्मक पक्ष यह है कि यह एक मुश्किल कोडिंग समस्या बन जाती है जिसमें सर्वर और क्लाइंट साइड पर विकास कार्य शामिल होते हैं।

3. यदि 1. और 2. संभव नहीं है, लेकिन यह वास्तव में महत्वपूर्ण है और छवि गुणवत्ता की तुलना में अधिक महत्वपूर्ण है, तो कहें, समय लोड करें, बस छवि को दोगुना करें।

   • यह वही है जो Google अपने मुखपृष्ठ पर अपने लोगो के साथ करता है: वे एक 269px x 95px कंटेनर में 538px x 190px PNG छवि स्क्वैश करते हैं। यह भी कमोबेश वैसा ही है जैसा कि उत्तरदायी चित्र काम करते हैं।

   • यह बुरा अभ्यास माना जाता था क्योंकि IE के पुराने संस्करण छवियों को स्केल करने में भयानक थे, लेकिन अब वे बहुत कम उपयोग किए जाते हैं और उच्च पिक्सेल घनत्व स्क्रीन की तुलना में बहुत कम आम हैं। यह अभी भी कुछ अवांछनीय है क्योंकि इससे छवि का आकार बढ़ेगा और इसलिए लोड समय बढ़ेगा - यह एक व्यापार-बंद है जिसे आपको केस-बाय-केस का न्याय करने की आवश्यकता है।

   • दोहरीकरण का आकार सामान्य है क्योंकि बहुत कम उपकरणों का अनुपात 2 से अधिक है, बहुत कम उपयोगकर्ताओं को 200% से अधिक ज़ूम किया जाता है, और 50% स्केलिंग छवियां अन्य राशियों की तुलना में साफ होती हैं।
4. यदि 1, 2 संभव नहीं है और लोड समय 3 के लिए बहुत अधिक प्राथमिकता है, तो मुझे किसी अन्य विकल्प के बारे में पता नहीं है, और मेरी सिफारिश है कि इसके बारे में चिंता न करें, क्योंकि इंटरनेट पर मौजूद आधी साइटों की समस्या एक जैसी है , और आपकी साइट पर इस समस्या वाले लोगों को अन्य साइटों पर भी यह समस्या होगी। नर्क, फ़ायरफ़ॉक्स विंडोज पर भी अपने यूआई बटन पिक्सल ...

Comments

मुझे लगता है कि उपयोगकर्ताओं को ज़ूम इन करना 'सबसे दुर्लभ' है। यह बहुत ज्यादा है कि फीचर पहले स्थान पर क्यों है ... ज़ूम इन करने के लिए। इसके अलावा, ज़ूम पर उच्च रिज़ॉल्यूशन की छवियों का उपयोग करने के साथ दिलचस्प विचार हैं, ध्यान दें कि इसके साथ प्रयोज्य चुनौतियां हो सकती हैं। उदाहरण के लिए, मैं नहीं चाहता कि हर बार जब मैं अपने ब्राउज़र में ज़ूम ऑप्शन को हिट करूं तो नई छवियां प्राप्त करें।

— DA01

यदि आप jpgs का उपयोग कर रहे हैं, तो छवियों के आकार को दोगुना करना (जैसा कि 3 में बताया गया है) और उन्हें कम से कम छवि संपीड़न के साथ सहेजना (गुणवत्ता 40 के रूप में कम) आपको छोटे फ़ाइल आकार दे सकता है। एक बार संपीड़न कलाकृतियों को कम करने के बाद दिखाई नहीं देते हैं। परिणाम अलग-अलग होते हैं, खासकर जहां छवियों में ग्रेडिएंट होते हैं।

— डोमिनिक

यद्यपि लेखन के समय बहुत नया और इस प्रकार बीमार समर्थन, नए <चित्र> तत्व का यहाँ उल्लेख है।

— user50849

ध्यान दें: जब फ़ोटोशॉप में वेब की बचत होती है, तो इच्छित आयामों को दोगुना करते हुए jpg-गुणवत्ता को 61% पर सेट किया जाता है, फ़ाइल का आकार लगभग 100% पर इच्छित आयामों के समान ही होगा। इसलिए मैंने अपने सभी jpegs को 61% तक संपीड़ित करना शुरू कर दिया है और उन्हें एक परिभाषित ऊँचाई / चौड़ाई के साथ सेवा दे रहा है (जिसमें ब्राउज़र को छवि लोड होने से पहले ही लेआउट के बारे में अधिक जानकारी देने का लाभ है!)

— केजेल श्मिट

Answer 2

जैसा कि DA01 ने टिप्पणी की कि आपको इसके बारे में कुछ नहीं करना चाहिए।

ज़ूम एक उपयोगकर्ता-निर्दिष्ट विकल्प है और इसलिए उनके नियंत्रण में है। वे जिन सेटिंग्स के साथ गड़बड़ करने का फैसला करते हैं, वे आपकी जिम्मेदारी नहीं होनी चाहिए।

आप विभिन्न ब्राउज़रों और संस्करणों के लिए और क्या नहीं, लेकिन यथोचित रूप से बोलते हुए आपको उपयोगकर्ता के ज़ूम का हिसाब नहीं देना चाहिए।

यकीन है कि आप 125% या 150% (और आप भी नहीं हो सकता है) के लिए जिम्मेदार हो सकता है। लेकिन 200%, 300%, अधिक? इसका कोई मतलब नहीं है।

क्या होगा यदि उपयोगकर्ता उच्च कंट्रास्ट विंडोज़ थीम का उपयोग करता है? क्या होगा अगर वे लगातार आवर्धक का उपयोग कर रहे हैं? किसे पड़ी है?

आदर्श रूप से आपकी वेबसाइट पर्याप्त लचीली है कि यह छोटे ज़ूम अंतर के बीच वास्तविक अंतर नहीं करता है, लेकिन ज़ूम के साथ गुणवत्ता में कमी आएगी लेकिन यह आपकी ज़िम्मेदारी नहीं है।

यह केवल मेरी राय है, लेकिन जिस कंपनी के लिए मैं काम करता हूं, वह ग्राहकों को स्पष्ट रूप से बताती है कि हम उनकी ज़ूम प्राथमिकताओं का समर्थन नहीं करते हैं।

Comments

व्हाट्सएप यूजर्स अल्ट्रावाइड या नैरो

— गम

Answer 3

अन्य लोगों ने आपके सामने आने वाली समस्याओं के बारे में कुछ बेहतरीन सुझाव दिए हैं और मैं इस क्षेत्र में अच्छा ट्यूटोरियल करने के लिए पर्याप्त नहीं हूं लेकिन ...

आप एक उत्तरदायी साइट डिज़ाइन कर सकते हैं जो उपयोगकर्ता के रेस / डिवाइस के अनुसार समायोजित हो और फिर आप शायद उस कोड की तलाश कर रहे हैं जो आपके अनुरोध पर छवियों को खींचने और निचोड़ने के बजाय छवियों को उच्च या निम्न रेस फाइलों में बदल देगा।

जब मैंने आखिरी बार ऐसा करने की कोशिश की, तो मैंने मीडिया-क्वेरी.जेएस और पिक्चरफिल.जेएस का इस्तेमाल किया। देखें: http://responsivedesign.is/resources/images/picture-fill । मेरे पास एक 3 कॉलम लेआउट था जहां कुछ छवियां दो स्तंभों को फैलाएंगी ... जब ब्राउज़र विंडो को काफी छोटा किया जाता था, तो बड़ी छवियां एक छोटे रेस संस्करण पर स्विच हो जाती थीं जो केवल एक कॉलम चौड़ा होता था। उपयोगकर्ता का ब्राउज़र केवल उस फ़ाइल के संस्करण को लोड करेगा जिसकी उन्हें ज़रूरत थी। (और मेरे मामले में, चिनाई प्लगइन सब कुछ समायोजित करने के लिए आगे बढ़ेगा)।

बेशक तब आपके उपयोगकर्ता को जावास्क्रिप्ट सक्षम होना चाहिए ...

Comments

जबकि मैं सभी उत्तरदायी वेब डिज़ाइन के लिए हूं, जो उपयोगकर्ता-ज़ूम की तुलना में एक अलग समस्या (अलग-अलग ब्राउज़र आकार को संभालने के लिए) को संभालता है (जो ब्राउज़र आकार से स्वतंत्र सब कुछ का आनुपातिक आकार देता है)

— DA01

Answer 4

आप उपयोगकर्ताओं को बल नहीं दे सकते। उपयोगकर्ता सेटिंग्स आपके साथ खेलने के लिए नहीं हैं। सेटिंग्स और उन्हें दरकिनार करना एक बुरा विचार है एक कारण हो सकता है कि उपयोगकर्ता ने कुछ किया। या तो मामले में आप विभिन्न उपकरणों में कुछ भी गारंटी नहीं दे सकते।

वास्तव में यदि आप तकनीकी पक्ष में जाते हैं तो यह और भी दिलचस्प हो जाता है। आप वास्तव में अपने वेबपेज के साथ राज्य की चाबी देते हैं। देखें उपयोगकर्ता वेबपेज डाउनलोड करता है और उपयोगकर्ता अब जो कुछ भी चाहते हैं उसे कर सकते हैं। इस परत पर आपका कोई नियंत्रण नहीं है, यह सभी उपयोगकर्ता मशीन पर चलने के बाद है और वे जो चाहें कर सकते हैं। यहां तक ​​कि स्टैकएक्सचेंज भी मेरे कंप्यूटर / मोबाइल पर वैसा नहीं दिखता है जैसा कि यह आपके ऊपर है। मैं अपने अंत में GUI के कुछ पहलुओं को बदल देता हूं, 2 रेंडरिंग बग्स को ठीक करने के लिए और 2 शॉर्टकट जोड़े हैं।

Comments

मुझे लगता है कि वे उपयोगकर्ता को ज़ूम इन करने से रोकने की कोशिश नहीं कर रहे हैं, लेकिन यह सुनिश्चित करें कि यदि, उदाहरण के लिए, उपयोगकर्ता का ब्राउज़र 125% ज़ूम के लिए डिफॉल्ट करता है क्योंकि विंडोज अजीब है , चित्र अभी भी कुरकुरा दिखाई देते हैं और पिक्सेलित नहीं दिखाई देते हैं।

— user56reinstatemonica8

कोई बात नहीं, वही बात

— joojaa

वे वास्तव में एक ही चीज़ नहीं हैं ... उदाहरण के लिए, Google का लोगो 538px x 190px PNG छवि है जो एक 269px x xpx कंटेनर में है। इसका मतलब है, यदि आप एक उच्च पिक्सेल घनत्व स्क्रीन में ज़ूम इन या उपयोग कर रहे थे, तो छवि को पिक्सेल किए जाने की संभावना कम है क्योंकि ब्राउज़र उस अतिरिक्त पिक्सेल डेटा का उपयोग कर सकता है। Google ऐसा करके उपयोगकर्ता की ज़ूम सेटिंग से नहीं खेल रहा है।

— user56reinstatemonica8

आप अपने अंत में जो करते हैं वह आपके ऊपर है। लेकिन अगर कोई 259% ज़ूम का उपयोग करता है तो ..

— joojaa

आज की आपकी सोच, भविष्य में चीजें बदल जाएगी, बहुत निकट भविष्य। तो किसी को भी विज़न की समस्या हो सकती है, आज 200% हो सकती है, कल 200% की भरपाई होगी जो इस समस्या की भरपाई करता है। या तो मामले में समस्या जल्द या बाद में हाथ से निकल जाएगी। आप सिर्फ अस्थायी जीत से अधिक नहीं कर सकते हैं, सिस्टम को बदलना होगा।

— पूजा

Answer 5

HiDPI स्क्रीन पर अपकमिंग छवियों के कष्टप्रद व्यवहार, जो धुंधली तस्वीरों (उर्फ फोटोग्राफर दुःस्वप्न) की ओर जाता है, ने भी मुझे काफी समय से परेशान किया है। मैंने यह भी सोचा कि छवियों के लिए अक्षम करने के लिए कोई सरल सीएसएस विशेषता नहीं है।

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));
        }
}

यदि आवश्यक हो तो अगला चरण विभिन्न छवि आकारों को परिभाषित करने और सेट करने के लिए कक्षाओं का उपयोग करेगा। मैं छवि आकार को गतिशील रूप से प्राप्त करने का एक तरीका नहीं जानता। सीएसएस फंक्शन एट्रर () इसके लिए काम नहीं करता है।

Answer 6

इसलिए यह एक प्रोग्रामिंग प्रश्न होगा। लेकिन JQuery, या यहां तक ​​कि सिर्फ विमान सीएसएस का उपयोग करके आप उपयोगकर्ताओं की स्क्रीन की चौड़ाई, स्क्रीन की ऊंचाई और इतने पर आधारित विभिन्न छवियों को प्रदर्शित कर सकते हैं।

फिर भी शायद यह पूछने के लिए स्टैकएक्सचेंज नहीं है।

Comments

सवाल स्क्रीन आकार के बारे में नहीं है। यह ब्राउज़र ज़ूम सेटिंग्स के बारे में है।

— DA01

Answer 7

आप बस HTML के माध्यम से ऐसा कर सकते हैं साइट के सिर में यह जोड़ें

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

यह डेवलपर्स द्वारा हर प्रकार की साइट के लिए अनुशंसित नहीं है, लेकिन आपको जो पूछ रहा है उसे पूरा करना चाहिए।

Comments

मुझे नहीं लगता कि इसका डेस्कटॉप ब्राउज़र पर कोई प्रभाव है।

— 15

मैंने हाल ही में इसी समस्या का समाधान करने के लिए यह कोशिश की है और यह काम नहीं करता है। इसके अलावा, अगर यह काम करता है, तो भी यह समस्या को गलत तरीके से हल करेगा - ज़ूम को रोकने के बजाय, छवियों को ज़ूम करने पर स्पष्टता बनाए रखें।

— user56reinstatemonica8

Answer 8

आशा है कि यह मदद करता है: सीएसएस नियम परिवर्तन: बॉडी टैग या किसी अन्य पैमाने पर - यहाँ सही नहीं देखें, कृपया:

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

Comments

ग्राफिक डिजाइन में आपका स्वागत है! जब भी यह सैद्धांतिक रूप से प्रश्न का उत्तर दे सकता है, तो उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर होगा ।

— लुसियानो