2009-02-12 16 views
8

पर CTRL/व्हील ज़ूम प्रभाव को अक्षम करें आप कुछ तत्वों पर सीएसएस या जावास्क्रिप्ट के साथ ctrl/wheel ज़ूम प्रभाव को कैसे अक्षम करते हैं। मैं एक मेनू बार बना देता हूं जो ज़ूम प्रभाव लागू होने पर विकृत हो जाता है। मैं इसे केवल कुछ तत्वों के लिए अक्षम करना चाहता हूं।रनटाइम

+0

यह एक पहुँच मुद्दा है और आप इसके साथ और इसके खिलाफ नहीं काम करने के लिए प्रयास करना चाहिए। यही कारण है कि आपको सीएसएस तत्वों का आकार बदलने के लिए रिश्तेदार इकाई "em" का उपयोग करना चाहिए। जीमेल रिश्तेदार आकार का एक बड़ा उदाहरण है। वहां जाएं और ब्राउज़र टेक्स्ट आकार को बड़ा या छोटा होने के लिए बदलें। –

उत्तर

0

आप नहीं कर सकते; यह एक ब्राउज़र सुविधा है, न कि एक दस्तावेज़ सुविधा।

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

11

बेहतर विचार: अपना लेआउट डिज़ाइन करें ताकि यह इस तरह के परिवर्तनों को संभालने के लिए पर्याप्त मजबूत हो। आप उन्हें अक्षम नहीं कर सकते हैं, भले ही आप फ़ॉन्ट आकार को ठीक करें (जिसे आपको पहले स्थान पर कभी नहीं करना चाहिए), ताकि आप शानदार ढंग से ज़ूम करने का भी जवाब दे सकें।

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

+1

"तथ्य यह है कि, यदि सभी तत्व ब्राउज़र द्वारा समान रूप से स्केल किए जाते हैं ..." मुझे लगता है कि उन्हें फ़ॉन्ट-केवल ज़ूमिंग में परेशानी हो रही है जो प्रभावी प्रतीत होता है। सौभाग्य से, यह अपने रास्ते पर है ... दुर्भाग्यवश, यह अभी भी कुछ सालों तक एक मुद्दा होगा। – AaronSieb

+0

यह उचित है। यदि पृष्ठ के कार्यात्मक भाग हैं जिन्हें फोंट के साथ स्केल नहीं किया जाना चाहिए (यानी सामग्री के अलावा कुछ भी), तो मेरे आकार को ठीक करने के लिए यह ठीक है। लेकिन अगर वह जेएस का उपयोग कर रहा है जो पिक्सेल-परिपूर्ण पोजीशनिंग या उन पंक्तियों के साथ कुछ भी निर्भर करता है, तो यह एक खो गया कारण है। – Welbog

+0

@Welbog तथ्य यह है कि ब्राउज़रों को त्रुटिपूर्ण माना जाता है: http: // stackoverflow।कॉम/क्यू/10914174/632951 – Pacerier

0

यहां मेरी समस्या है: मैंने हमेशा ईएमएस के साथ डिज़ाइन किया है, और वे जादुई रूप से काम करते हैं। लेकिन पूर्ण-पृष्ठ ज़ूम के साथ, मेरी पृष्ठभूमि भी ज़ूम इन की जाती है। अगर मेरे पास मुख्य पृष्ठभूमि के रूप में दोहराव पैटर्न है, तो मैं नहीं चाहता कि वह पिक्सेलकृत हो। वे कुछ काम से बचने में मदद करते हैं, जैसे डॉग बोमन के सीएसएस के स्लाइडिंग दरवाजे को लागू करना, लेकिन अब मुझे धुंधले टैब के साथ रहना है।

मुझे पूर्ण पृष्ठ ज़ूम के साथ एक और समस्या है, कम से कम इसे आज के ब्राउज़र में लागू किया गया है: मैं उन 'लोगों' में से एक हूं जिन्होंने 16pt के बजाय अपना ब्राउज़र 12pt फ़ॉन्ट पर सेट किया है। प्रत्येक बार थोड़ी देर में, मैं एक निश्चित (निश्चित चौड़ाई, निश्चित रूप से) साइट पर आ जाता हूं जो टेक्स्ट को एक छोटे आकार में बदलता है (मुझे अनुमान है कि वे इसे बनाने के लिए 14px की बजाय 0.9em या कुछ इस्तेमाल करते हैं, छोटे)। मैं आमतौर पर सिर्फ एक या दो इंच में ज़ूम करता हूं, और सब ठीक रहेगा। पूर्ण-पृष्ठ ज़ूम के साथ, हालांकि, छवियों को बुरी तरह स्केल किया गया है और मेरे पास एक क्षैतिज स्क्रॉलबार है।

पहली समस्या का समाधान पृष्ठभूमि-छवि टैग में किसी प्रकार के प्रसंस्करण निर्देश को उस तत्व पर पूर्ण-पृष्ठ ज़ूम को अस्वीकार करने की अनुमति देना होगा। या शायद दस्तावेज़ के सिर में कुछ। यदि ब्राउज़र वास्तव में इसके बारे में उचित होना चाहते हैं, तो वे उपयोगकर्ताओं को एक विकल्प भी दे सकते हैं जो वे सेट-ज़ूम निर्देश को ओवर-राइड कर सकते हैं, ताकि वे वैसे भी ज़ूम कर सकें यदि वे चुनते हैं। दूसरी समस्या का समाधान पूर्ण पृष्ठ ज़ूम के लिए 16px/em की दर से सभी पीएक्स को एम में परिवर्तित करने के लिए होगा, और अपने टेक्स्ट आकार में ज़ूम करने के बजाय, अपने टेक्स्ट का उपयोग करके पीएक्स को कनवर्ट करने के बजाय आधार के रूप में आकार। फिर 16px तक वापस स्क्रॉल करने से छवियों को पूरी तरह से आकार दिया जाएगा, जैसा कि इरादा है। IE और Firefox के लिए

2

समाधान:

var obj=document.body; // obj=element for example body 
// bind mousewheel event on the mouseWheel function 
if(obj.addEventListener) 
{ 
    obj.addEventListener('DOMMouseScroll',mouseWheel,false); 
    obj.addEventListener("mousewheel",mouseWheel,false); 
} 
else obj.onmousewheel=mouseWheel; 

function mouseWheel(e) 
{ 
    // disabling 
    e=e?e:window.event; 
    if(e.ctrlKey) 
    { 
     if(e.preventDefault) e.preventDefault(); 
     else e.returnValue=false; 
     return false; 
    } 
} 
+0

एफवाईआई, यह वेबकिट ब्राउज़र में काम नहीं करेगा क्योंकि नियंत्रण कुंजी प्रेस mousewheel घटना से अधिक है और पता नहीं चला है। – SpYk3HH