जावास्क्रिप्ट में ब्राउज़र की "ज़ूम" घटना को पकड़ो

Question

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

धन्यवाद।

Comments

मेरा मानना ​​है कि पेज को जूम करने पर नए ब्राउज़र ऑनरेस इवेंट को फायर करते हैं।

— epascarello

मेरे पास एक समान समस्या है, लेकिन मैं यह नहीं जानना चाहता कि ज़ूम कब बदला जाए, मैं ज़ूम का मूल्य जानना चाहता हूं जब मेरा पेज लोड होता है, साथ ही साथ।

— नोसरेडना

वास्तव में डुप्लिकेट नहीं। यहाँ प्रश्न इस घटना को पकड़ने के बारे में है, ज़ूम स्तर का निर्धारण नहीं है।

— असफ लवी

@epascarello - हाँ, लेकिन यह मेरी टिप्पणी को अमान्य नहीं करता

— HorusKol

मैं नवीनतम ब्राउज़रों में 'ऑनरेस्स' के बारे में पुष्टि करना चाहता हूं। अब तक मैं न्यूज़सेट क्रोम (33), एफएफ (28), आईई (11 और 11 को 9 वें मोड) में देखता हूं, जब आप ज़ूम इन या आउट करते हैं तो सभी सही ढंग से इवेंट को ट्रिगर करते हैं।

— ब्रॉक

Answer 1

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

मुझे ज़ूम स्तर का पता लगाने के दो तरीके मिले हैं। ज़ूम स्तर परिवर्तनों का पता लगाने का एक तरीका इस तथ्य पर निर्भर करता है कि प्रतिशत मान ज़ूम नहीं किए गए हैं। प्रतिशत मान व्यूपोर्ट चौड़ाई के सापेक्ष है, और इस प्रकार पृष्ठ ज़ूम से अप्रभावित है। यदि आप दो तत्वों को सम्मिलित करते हैं, एक प्रतिशत में एक स्थिति के साथ, और एक ही स्थिति में पिक्सेल के साथ, वे पृष्ठ ज़ूम होने पर अलग हो जाएंगे। दोनों तत्वों की स्थिति के बीच का अनुपात खोजें और आपको ज़ूम स्तर मिला है। देखिए टेस्ट केस http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3

आप इसे उपरोक्त पोस्ट के टूल का उपयोग करके भी कर सकते हैं। समस्या यह है कि आप कम या ज्यादा शिक्षित अनुमान लगा रहे हैं कि पेज ज़ूम हुआ है या नहीं। यह अन्य की तुलना में कुछ ब्राउज़रों में बेहतर काम करेगा।

यह बताने का कोई तरीका नहीं है कि यदि ज़ूम करने के दौरान वे आपके पृष्ठ को लोड करते हैं तो पृष्ठ को ज़ूम किया जाता है या नहीं।

Comments

एक शरीर के लिए ओन्डलोड हैंडलर के अंदर आकार के मापदंडों की जांच कर सकता है। IE8 बनाम 9 के डिबगिंग में उत्सुकता से, ऐसा प्रतीत होता है कि शरीर के लिए onresize हैंडलर को IE8 में दस्तावेज़ पास किया गया है, जबकि IE9 विंडो को पास करता है, जैसा कि क्रोम करता है।

— वाल्टर के

यदि आप दो तत्वों को एक ही स्थिति में रखते हैं और ज़ूम करते समय पृष्ठ लोड होता है, तो क्या दो तत्वों के बीच विस्थापन नहीं होगा? यह नहीं बताएगा कि क्या पृष्ठ पहले से ही ज़ूम किया गया था या नहीं?

— विजयांत

यह भीdocument.body.offsetWidth

— सामी बेनचरिफ़

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

— hewiefreeman

Answer 2

मैं ज़ूम "घटनाओं" पर प्रतिक्रिया करने के लिए जावास्क्रिप्ट के इस टुकड़े का उपयोग कर रहा हूं।
यह विंडो की चौड़ाई को बताता है। (जैसा कि कुछ हद तक इस पृष्ठ पर सुझाव दिया (जो इयान इलियट से जुड़ा हुआ): http://novemberborn.net/javascript/page-zoom-ff3 [संग्रह] )

क्रोम के साथ परीक्षण किया, फ़ायरफ़ॉक्स 3.6 और ओपेरा, IE नहीं।

सादर, मैगनस

var zoomListeners = [];

(function(){
  // Poll the pixel width of the window; invoke zoom listeners
  // if the width has been changed.
  var lastWidth = 0;
  function pollZoomFireEvent() {
    var widthNow = jQuery(window).width();
    if (lastWidth == widthNow) return;
    lastWidth = widthNow;
    // Length changed, user must have zoomed, invoke listeners.
    for (i = zoomListeners.length - 1; i >= 0; --i) {
      zoomListeners[i]();
    }
  }
  setInterval(pollZoomFireEvent, 100);
})();

Comments

खिड़की के साथ झूठी सकारात्मक के बारे में क्या आकार बदलता है?

— 19

लेकिन आप उन मामलों को फ़िल्टर कर सकते हैं जब आप एक ऑनरेस हैंडलर भी लागू करते हैं। तो एक समाधान के लिए मूल बातें यहाँ हैं मैं कहूँगा।

— स्टिजेन डे विट

@StijndeWitt इसे पढ़ने के बाद मैं प्रस्तावित पथ को समझना शुरू कर रहा हूं, अब मैं एक समाधान पर काम कर रहा हूं, जिसमें विशेष रूप से मोबाइल पर, आकार बदलने वाली घटनाओं को फ़िल्टर किया जा सकता है। किसी को?

— लोटेकसून

हो सकता है कि आप अंतर और आकार को ज़ूम करने के लिए गैप वैल्यू का उपयोग कर सकें? मेरा मतलब है कि ज़ूम तुरंत बदल जाएगा विंडो चौड़ाई> x पिक्सेल द्वारा।

— सेबेस्टियन

झूठी सकारात्मकता एक मुद्दा है, हाँ। यदि पहलू अनुपात बनाए रखा गया था, तो क्या यह जांचने से 99.99% सभी झूठी सकारात्मकता समाप्त नहीं होगी? स्क्रिप्ट के आखिरी अनुपात को याद रखें और नए अनुपात की गणना करें और जांचें कि क्या वे समान हैं। संयोजन करें कि चौड़ाई भिन्न होने के साथ और आपके पास एक अच्छा आधार होना चाहिए

— बीईस्पोट वॉन स्टर्लिंग

Answer 3

खुशखबरी हर कोईकुछ लोग! नए ब्राउज़र ज़ूम को बदले जाने पर विंडो आकार बदलने वाली घटना को ट्रिगर करेंगे।

Comments

एंड्रॉइड के लिए क्रोम और फ़ायरफ़ॉक्स ज़ूम पर रिसाइज़ इवेंट को ट्रिगर नहीं करेगा।

— लोटेकसून

यह अच्छी खबर नहीं है अगर आप चाहते हैं कि आकार बदलने वाली घटना को ट्रिगर न करें।

— रेहड़ीवाला

बेहतर खबर एक वास्तविक ज़ूम घटना होगी, जो आकार बदलने वाली घटना से अलग होगी।

— विंसेंट

दोनों सच। संपादित।

— बेन

क्या यह भी संभव है कि ज़ूम को किसी तरह सेट किया जाए?

— ओल्डबॉय

Answer 4

नीचे के रूप में px_ratio को परिभाषित करने देता है:

px अनुपात = css px में भौतिक पिक्सेल का अनुपात।

यदि कोई पृष्ठ ज़ूम करता है, तो व्यूपोर्ट pxes (px पिक्सेल से भिन्न होता है) कम हो जाता है और स्क्रीन पर फिट होना चाहिए, इसलिए अनुपात (भौतिक पिक्सेल / CSS_px) को बड़ा होना चाहिए।

लेकिन विंडो आकार बदलने में, स्क्रीन का आकार कम हो जाता है और साथ ही साथ pxes भी। इसलिए अनुपात बनाए रखेगा।

ज़ूमिंग: windows.resize इवेंट -> को ट्रिगर करें और px_ratio बदलें

परंतु

आकार बदलने: windows.resize घटना को ट्रिगर -> px_ratio को परिवर्तित नहीं करता है

//for zoom detection
px_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;

$(window).resize(function(){isZooming();});

function isZooming(){
    var newPx_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
    if(newPx_ratio != px_ratio){
        px_ratio = newPx_ratio;
        console.log("zooming");
        return true;
    }else{
        console.log("just resizing");
        return false;
    }
}

सीएसएस पीएक्स और भौतिक पिक्सेल के बीच मुख्य बिंदु अंतर है।

https://gist.github.com/abilogos/66aba96bb0fb27ab3ed4a13245817d1e

Comments

यह स्वीकृत उत्तर IMO होना चाहिए। निर्दोष रूप से अब तक काम करता है, धन्यवाद! अगर किसी को भी कोई दिलचस्पी है तो उसे एक कस्टम इवेंट में लपेट दिया गया है । gith.github.com/souporserious/b44ea5d04c38c2e7ff32cd1912a17cd0 ।

— शराब बनाने वाला

Answer 5

यह मेरे लिए काम करता है:

        var deviceXDPI = screen.deviceXDPI;
        setInterval(function(){
            if(screen.deviceXDPI != deviceXDPI){
                deviceXDPI = screen.deviceXDPI;
                ... there was a resize ...
            }
        }, 500);

यह केवल IE8 पर आवश्यक है। अन्य सभी ब्राउज़र स्वाभाविक रूप से एक आकार बदलने की घटना उत्पन्न करते हैं।

Answer 6

वहाँ एक निफ्टी प्लगइन है yonranकि पता लगाने से कर सकते हैं। यहाँ StackOverflow पर उनका पहले उत्तर दिया गया प्रश्न है। यह अधिकांश ब्राउज़रों के लिए काम करता है। आवेदन इस रूप में सरल है:

window.onresize = function onresize() {
  var r = DetectZoom.ratios();
  zoomLevel.innerHTML =
    "Zoom level: " + r.zoom +
    (r.zoom !== r.devicePxPerCssPx
        ? "; device to CSS pixel ratio: " + r.devicePxPerCssPx
        : "");
}

डेमो

Comments

एंड्रॉइड 4.4.2 के लिए फ़ायरफ़ॉक्स पर काम नहीं करता है। मोबाइल में FF के लिए भी Always enable zoomएक्सेसिबिलिटी ऑप्शन में बटन पर टिक करें। डेमो परिवर्तन पर प्रतिक्रिया नहीं करेगा।

— लोटेकसून

Answer 7

मैं विंडो चौड़ाई में परिवर्तन पर नज़र रखने के साथ पिछले समाधान में सुधार का सुझाव देना चाहता हूं। अपने स्वयं के ईवेंट श्रोताओं को रखने के बजाय आप मौजूदा जावास्क्रिप्ट ईवेंट सिस्टम का उपयोग कर सकते हैं और चौड़ाई परिवर्तन पर अपने स्वयं के ईवेंट को ट्रिगर कर सकते हैं, और ईवेंट हैंडलर्स को इसमें बाँध सकते हैं।

$(window).bind('myZoomEvent', function() { ... });

function pollZoomFireEvent() 
{ 

    if ( ... width changed ... ) {
        $(window).trigger('myZoomEvent');
    }
}

थ्रॉटल / डेब्यू आपके हैंडलर की कॉल की दर को कम करने में मदद कर सकता है।

Comments

थ्रॉटल / डेब्यू केवल तभी उपयोगी होता है जब मतदान कुछ अन्य घटनाओं (जैसे माउस मूवमेंट या कीप) से शुरू होता है।

— fuzzyTew

Answer 8

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

Answer 9

<script>
var zoomv = function() {
  if(topRightqs.style.width=='200px){
  alert ("zoom");
  }
};
zoomv();
</script>

Answer 10

IOS 10 पर ईवेंट श्रोता को ईवेंट में जोड़ना touchmoveऔर पता लगाना संभव है, यदि पेज को वर्तमान ईवेंट के साथ जूम किया जाता है।

var prevZoomFactorX;
var prevZoomFactorY;
element.addEventListener("touchmove", (ev) => {
  let zoomFactorX = document.documentElement.clientWidth / window.innerWidth;
  let zoomFactorY = document.documentElement.clientHeight / window.innerHeight;
  let pageHasZoom = !(zoomFactorX === 1 && zoomFactorY === 1);

  if(pageHasZoom) {
    // page is zoomed
    
    if(zoomFactorX !== prevZoomFactorX || zoomFactorY !== prevZoomFactorY) {
      // page is zoomed with this event
    }
  }
  prevZoomFactorX = zoomFactorX;
  prevZoomFactorY = zoomFactorY;
});

Answer 11

हालाँकि यह एक 9 वर्ष पुराना प्रश्न है, फिर भी समस्या बनी हुई है!

मैं एक परियोजना में ज़ूम को छोड़कर, आकार का पता लगा रहा हूं, इसलिए मैंने अपना कोड संपादित किया और इसे आकार बदलने और एक दूसरे से अनन्य ज़ूम करने के लिए काम करने के लिए बनाया। यह ज्यादातर समय काम करता है , इसलिए यदि अधिकांश आपकी परियोजना के लिए अच्छा पर्याप्त है, तो यह उपयोगी होना चाहिए! यह उस समय का 100% जूमिंग का पता लगाता है जो मैंने अब तक परीक्षण किया है। एकमात्र मुद्दा यह है कि अगर उपयोगकर्ता पागल हो जाता है (यानी। तेजी से खिड़की को आकार देने वाला) या खिड़की की खराबी होती है तो यह खिड़की के आकार के बजाय ज़ूम के रूप में आग लगा सकता है।

यह ज़ूम के रूप में या विंडो से स्वतंत्र रूप से परिवर्तन का पता लगाने के दौरान window.outerWidthया window.outerHeightविंडो के आकार में परिवर्तन का पता लगाकर काम करता है ।window.innerWidthwindow.innerHeight

//init object to store window properties
var windowSize = {
  w: window.outerWidth,
  h: window.outerHeight,
  iw: window.innerWidth,
  ih: window.innerHeight
};

window.addEventListener("resize", function() {
  //if window resizes
  if (window.outerWidth !== windowSize.w || window.outerHeight !== windowSize.h) {
    windowSize.w = window.outerWidth; // update object with current window properties
    windowSize.h = window.outerHeight;
    windowSize.iw = window.innerWidth;
    windowSize.ih = window.innerHeight;
    console.log("you're resizing"); //output
  }
  //if the window doesn't resize but the content inside does by + or - 5%
  else if (window.innerWidth + window.innerWidth * .05 < windowSize.iw ||
    window.innerWidth - window.innerWidth * .05 > windowSize.iw) {
    console.log("you're zooming")
    windowSize.iw = window.innerWidth;
  }
}, false);

नोट: मेरा समाधान काजाग्नस की तरह है, लेकिन इसने मेरे लिए बेहतर काम किया है।

Comments

मैं वोट नहीं करूंगा क्योंकि मैं देख सकता हूं कि आपके पास एक समाधान है जो काम करता है, और मैं समझता हूं कि आपका कोड क्या करता है, लेकिन मैं 0.05कम से कम एक अच्छा विवरण प्रदान किए बिना एक जादू की संख्या का उपयोग करने की सिफारिश नहीं करूंगा । ;-) उदाहरण के लिए, मुझे पता है कि क्रोम में, विशेष रूप से, 10% सबसे छोटी राशि है जो ब्राउज़र किसी भी मामले में ज़ूम करेगा, लेकिन यह स्पष्ट नहीं है कि यह अन्य ब्राउज़रों के लिए सही है। फी, हमेशा सुनिश्चित करें कि आपके कोड का परीक्षण किया गया है, और इसका बचाव या सुधार करने के लिए तैयार रहें।

— Nolo

दिलचस्प दृष्टिकोण

— ओल्डबॉय

Answer 12

यहाँ एक साफ समाधान है:

// polyfill window.devicePixelRatio for IE
if(!window.devicePixelRatio){
  Object.defineProperty(window,'devicePixelRatio',{
    enumerable: true,
    configurable: true,
    get:function(){
      return screen.deviceXDPI/screen.logicalXDPI;
    }
  });
}
var oldValue=window.devicePixelRatio;
window.addEventListener('resize',function(e){
  var newValue=window.devicePixelRatio;
  if(newValue!==oldValue){
    // TODO polyfill CustomEvent for IE
    var event=new CustomEvent('devicepixelratiochange');
    event.oldValue=oldValue;
    event.newValue=newValue;
    oldValue=newValue;
    window.dispatchEvent(event);
  }
});

window.addEventListener('devicepixelratiochange',function(e){
  console.log('devicePixelRatio changed from '+e.oldValue+' to '+e.newValue);
});

Comments

यह एक बहुत अच्छा समाधान की तरह लगता है, और एक प्रॉक्सी के साथ आपको अपने इंटरसेप्टर के साथ विधवा संपत्ति को देखने की भी आवश्यकता नहीं होगी - क्या हम यह सुनिश्चित करने के लिए जानते हैं कि उपयोगकर्ता द्वारा ज़ूम किए जाने पर डीपीआर को अपडेट करना सभी ब्राउज़रों को क्या करना चाहिए / क्या करना चाहिए? एर .. स्क्रैच दैट आइडिया - विंडो को प्रॉक्साइड नहीं किया जा सकता है, हो सकता है कि कोई समाधान "मैचमीडिया" का उपयोग करके मौजूद हो, लेकिन चूंकि यह सिर्फ एक सच्ची / झूठी बात है, इसलिए मुझे यकीन नहीं है कि आप अनुरूप मूल्य में बदलाव के लिए कैसे परीक्षण करेंगे? DPR ...

— जॉन z

Answer 13

आकार बदलने की घटना आधुनिक ब्राउज़रों पर काम करती है window, और फिर bodyउदाहरण के लिए (या .getBoundingClientRect () ) के साथ, या अन्य तत्व के मूल्यों को पढ़कर ।

पहले के कुछ ब्राउज़रों में किसी भी HTML एलिमेंट पर इवेंट हैंडलर्स को रजिस्टर करना संभव था। किसी भी तत्व पर हैंडलर सेट करने के लिए अभी भी ऑनरेसी विशेषताओं को सेट करना या AddEventListener () का उपयोग करना संभव है। हालाँकि, आकार बदलने वाली घटनाओं को केवल विंडो ऑब्जेक्ट पर निकाल दिया जाता है (अर्थात document.defaultView द्वारा लौटा दिया जाता है)। केवल विंडो ऑब्जेक्ट पर पंजीकृत हैंडलर को आकार बदलने वाली घटनाएं प्राप्त होंगी ।

window.addEventListener("resize", getSizes, false)
        
function getSizes(){
  let body = document.body
  console.log(body.clientWidth +"px x "+ body.clientHeight + "px")
}

एक अन्य विकल्प : ResizeObserver API

अपने लेआउट के आधार पर, आप किसी विशेष तत्व पर आकार बदलने के लिए देख सकते हैं।

यह «उत्तरदायी» लेआउट पर अच्छी तरह से काम करता है, क्योंकि कंटेनर बॉक्स को ज़ूम करते समय रिसाइज़ हो जाता है।

function watchBoxchange(e){
 // console.log(e[0].contentBoxSize.inlineSize+" "+e[0].contentBoxSize.blockSize)
 info.textContent = e[0].contentBoxSize.inlineSize+" * "+e[0].contentBoxSize.blockSize + "px"
}

new ResizeObserver(watchBoxchange).observe(fluid)

#fluid {
  width: 200px;
  height:100px;
  overflow: auto;
  resize: both;
  border: 3px black solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 8vh
}

<div id="fluid">
   <info id="info"></info> 
</div>

---

उपयोगकर्ता इशारों की घटनाओं से जावास्क्रिप्ट कार्यों को अधिभार नहीं करने के लिए सावधान रहें । जब भी आपको redraws की आवश्यकता हो, requestAnimationFrame का उपयोग करें ।

Answer 14

एमडीएन के अनुसार, "मैचमीडिया" यह करने का उचित तरीका है https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#Monitoring -screen_resolution_or_zoom_level_changes

यह थोड़ा बारीक है क्योंकि प्रत्येक उदाहरण एक समय में केवल एक एमक्यू देख सकता है, इसलिए यदि आप किसी में रुचि रखते हैं ज़ूम स्तर के बदलाव मैचर्स का एक गुच्छा बनाने की आवश्यकता है .. लेकिन चूंकि ब्राउज़र घटनाओं के उत्सर्जन के लिए प्रभारी है, इसलिए यह संभवतः है अभी भी मतदान से अधिक प्रदर्शनकारी है, और आप कॉलबैक को थ्रॉटल या डिबेट कर सकते हैं या इसे एक एनीमेशन फ्रेम या किसी चीज़ में पिन कर सकते हैं - यहाँ एक कार्यान्वयन है जो बहुत ही डरावना लगता है, बेझिझक स्वैरोटल या जो भी पहले से ही उस पर निर्भर करता है।

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

const el = document.querySelector('#dppx')

if ('matchMedia' in window) {
  function observeZoom(cb, opts) {
    opts = {
      // first pass for defaults - range and granularity to capture all the zoom levels in desktop firefox
      ceiling: 3,
      floor: 0.3,
      granularity: 0.05,
      ...opts
    }
    const precision = `${opts.granularity}`.split('.')[1].length

    let val = opts.floor
    const vals = []
    while (val <= opts.ceiling) {
      vals.push(val)
      val = parseFloat((val + opts.granularity).toFixed(precision))
    }

    // construct a number of mediamatchers and assign CB to all of them
    const mqls = vals.map(v => matchMedia(`(min-resolution: ${v}dppx)`))

    // poor person's throttle
    const throttle = 3
    let last = performance.now()
    mqls.forEach(mql => mql.addListener(function() {
      console.debug(this, arguments)
      const now = performance.now()
      if (now - last > throttle) {
        cb()
        last = now
      }
    }))
  }

  observeZoom(function() {
    el.innerText = window.devicePixelRatio
  })
} else {
  el.innerText = 'unable to observe zoom level changes, matchMedia is not supported'
}

<div id='dppx'>--</div>

Answer 15

मैं 3 साल पुराने लिंक का उत्तर दे रहा हूं, लेकिन मुझे लगता है कि यहां एक अधिक स्वीकार्य उत्तर है,

फ़ाइल के रूप में .css बनाएँ,

@media screen and (max-width: 1000px) 
{
       // things you want to trigger when the screen is zoomed
}

ईजी: -

@media screen and (max-width: 1000px) 
{
    .classname
    {
          font-size:10px;
    }
}

स्क्रीन को लगभग 125% तक ज़ूम किए जाने पर उपरोक्त कोड फ़ॉन्ट '10px' का आकार बनाता है। आप '1000px' के मान को बदलकर विभिन्न ज़ूम स्तर की जाँच कर सकते हैं।

Comments

max-widthज़ूम अनुपात के बीच क्या संबंध है?

— Seebiscuit

इस कोड को प्रत्येक <1000px स्क्रीन पर निष्पादित किया जाएगा और इसका ज़ूम से कोई लेना-देना नहीं है

— Artur Stary

@ArturStary यह पता लगाने का कोई तरीका नहीं है कि क्या ब्राउज़र ज़ूम किया गया है, लेकिन कई वर्कअराउंड हैं और उनमें से एक है जिसका मैंने अपने उत्तर में उल्लेख किया है। इसके अलावा, मैंने कहा था कि आप अलग-अलग स्क्रीन के आकार की जाँच करने के लिए 1000px का मान बदल सकते हैं जो विभिन्न ज़ूम स्तर का प्रभाव देगा

— Saumil