सभी आधुनिक ब्राउज़रों में पृष्ठ ज़ूम स्तर का पता कैसे लगाएं?

310

  1. मैं सभी आधुनिक ब्राउज़रों में पृष्ठ ज़ूम स्तर का पता कैसे लगा सकता हूं? जबकि यह थ्रेड IE7 और IE8 में इसे करने का तरीका बताता है, मुझे एक अच्छा क्रॉस-ब्राउज़र समाधान नहीं मिल रहा है।

  2. फ़ायरफ़ॉक्स पेज जूम स्तर को भविष्य की पहुंच के लिए संग्रहीत करता है। पहले पृष्ठ के लोड पर, क्या मैं ज़ूम स्तर प्राप्त कर सकूंगा? कहीं न कहीं मैंने इसे पढ़ा है जब पेज लोड होने के बाद ज़ूम में बदलाव होता है।

  3. क्या 'zoom'घटना को फंसाने का कोई तरीका है ?

मुझे इसकी आवश्यकता है क्योंकि मेरी कुछ गणना पिक्सेल-आधारित हैं और ज़ूम होने पर उनमें उतार-चढ़ाव हो सकता है।

@Tfl द्वारा दिया गया संशोधित नमूना

ज़ूम होने पर यह पृष्ठ विभिन्न ऊंचाई मानों को सचेत करता है। [jsFiddle]

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
    </head>
    <body>
        <div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie nisl sit amet vehicula. Donec semper tristique blandit. Vestibulum adipiscing placerat mollis.</div>
        <button onclick="alert($('#xy').height());">Show</button>
    </body>
</html>
javascript  browser  zoom  detection 
— understack
स्रोत
1
मूल रूप से मैं 100% ज़ूम पर एक DIV के आयाम को जानना चाहता हूं।
— को
4
मूल रूप से 2019 में ज़ूम का पता लगाने का कोई तरीका नहीं है : मैंने मैक कैटालिना पर क्रोम 78 पर सभी नीचे दिए गए समाधानों का परीक्षण किया है और उनमें से किसी ने भी काम नहीं किया है।
— कोलिमार्को

जवाबों:

274

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

संपादित करें (2011-12-12): मैंने एक प्रोजेक्ट जोड़ा है जिसे क्लोन किया जा सकता है: https://github.com/tombigel/detec-boom

  • IE8 : screen.deviceXDPI / screen.logicalXDPI(या डिफ़ॉल्ट ज़ूम के सापेक्ष ज़ूम स्तर के लिए screen.systemXDPI / screen.logicalXDPI)
  • IE7 : var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;( इस उदाहरण या इस उत्तर के लिए धन्यवाद )
  • FF3.5 केवल : screen.width/ मीडिया क्वेरी स्क्रीन चौड़ाई (नीचे देखें) (इस तथ्य का लाभ उठाता है कि screen.widthडिवाइस पिक्सेल का उपयोग करता है लेकिन MQ चौड़ाई CSS पिक्सेल का उपयोग करता है - Quirksmode चौड़ाई के लिए धन्यवाद )
  • FF3.6 : कोई ज्ञात विधि नहीं
  • FF4 + : मीडिया क्वेरीज़ बाइनरी खोज (नीचे देखें)
  • WebKit : https://www.chromestatus.com/feature/5737866978131968 (टिप्पणियों में Teo के लिए धन्यवाद)
  • WebKit : के साथ एक div के पसंदीदा आकार को मापने -webkit-text-size-adjust:none।
  • WebKit : ( r72591 से टूटा हुआ ) document.width / jQuery(document).width()( डर्क वैन ओस्टरबोसच के ऊपर धन्यवाद )। डिवाइस पिक्सेल के संदर्भ में अनुपात प्राप्त करने के लिए (डिफ़ॉल्ट ज़ूम के सापेक्ष), द्वारा गुणा करें window.devicePixelRatio।
  • पुराने WebKit? (असत्यापित): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth( इस उत्तर से )
  • ओपेरा : document.documentElement.offsetWidth/ position:fixed; width:100%div की चौड़ाई । यहाँ से ( Quirksmode की चौड़ाई तालिका कहती है कि यह एक बग है; इनरव्हीड को CSS px होना चाहिए)। हम उस स्थिति का उपयोग करते हैं: व्यूपोर्ट की चौड़ाई प्राप्त करने के लिए निश्चित तत्व जिसमें स्पेस स्क्रॉल शामिल हैं ; document.documentElement.clientWidth इस चौड़ाई को शामिल नहीं करता है। 2011 में किसी समय से यह टूट गया है; मुझे पता है कि अब ओपेरा में ज़ूम स्तर प्राप्त करने का कोई तरीका नहीं है।
  • अन्य : सेबस्टियन से फ्लैश समाधान
  • अविश्वसनीय: माउस घटनाओं को सुनें और स्क्रीनएक्स में बदलाव / क्लाइंटएक्स में बदलाव को मापें

यहाँ फ़ायरफ़ॉक्स 4 के लिए एक द्विआधारी खोज है, क्योंकि मैं किसी भी चर के बारे में नहीं जानता जहाँ यह उजागर है:

<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
  var style = document.getElementById('binarysearch');
  var dummyElement = document.getElementById('dummyElement');
  style.sheet.insertRule('@media (' + property + ':' + r +
                         ') {#dummyElement ' +
                         '{text-decoration: underline} }', 0);
  var matched = getComputedStyle(dummyElement, null).textDecoration
      == 'underline';
  style.sheet.deleteRule(0);
  return matched;
};
var mediaQueryBinarySearch = function(
    property, unit, a, b, maxIter, epsilon) {
  var mid = (a + b)/2;
  if (maxIter == 0 || b - a < epsilon) return mid;
  if (mediaQueryMatches(property, mid + unit)) {
    return mediaQueryBinarySearch(
        property, unit, mid, b, maxIter-1, epsilon);
  } else {
    return mediaQueryBinarySearch(
        property, unit, a, mid, maxIter-1, epsilon);
  }
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
    'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
    'min-device-width', 'px', 0, 6000, 25, .0001);
</script>
— yonran
स्रोत
1
बहुत अच्छा काम, हालांकि यह IE 8.0.7601.17514 (नवीनतम) में मेरे लिए काम नहीं करेगा। किसी भी फ़ंक्शन getZoom () में सभी को लपेटने का कोई भी मौका जो सभी ब्राउज़रों में काम करता है? शायद यह भी एक jQuery प्लगइन के रूप में जारी? फिर से अच्छा काम।
— ripper234
1
@yonran महान प्लगइन!, लेकिन यह IE9 में काम नहीं करता है zoom: screen.deviceXDPI / screen.logicalXDPI,इसके बजाय होना चाहिएzoom: screen.systemXDPI / screen.logicalXDPI,
— डैनियल
1
@RobW, जब मैंने पहली बार फ़ायरफ़ॉक्स 4 के लिए यह लिखा था, फ़ायरफ़ॉक्स नहीं था matchMedia। पॉल आयरिश भी एक लिखा समान matchMedia polyfill कि का हिस्सा है Modernizr ।
— योनरान
7
सबके लिए अच्छी खबर है! उन्होंने इसे अंतिम रूप दिया! Vieport API! chromestatus.com/feature/5737866978131968 मैं इसका परीक्षण करता हूँ, बढ़िया सामग्री!
— तेओ
3
व्यूपोर्ट एपीआई केवल चुटकी-ज़ूम के लिए काम करता है; यदि आप डेस्कटॉप पर ज़ूम करते हैं, तो यह कहता है कि पैमाना 1. जेजोन टी फेदरिंगम है, "भेदभाव" के अलावा अन्य कारण हैं जो ज़ूम स्तर जानना चाहते हैं। ज़ूम एक डोमेन के लिए सभी पृष्ठों पर सेट किया गया है, लेकिन आप इसे एक गेम पेज या एक एक्सटेंशन पॉपअप से अलग कर सकते हैं जो आप एक सहायता पृष्ठ में करते हैं।
— पुडिका
61

तुम कोशिश कर सकते हो

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);

यह आपको गैर-रेटिना डिस्प्ले पर ब्राउज़र ज़ूम प्रतिशत स्तर देगा। उच्च डीपीआई / रेटिना डिस्प्ले के लिए, यह विभिन्न मूल्यों (जैसे, क्रोम और सफारी के लिए 200, फ़ायरफ़ॉक्स के लिए 140) का उत्पादन करेगा।

ज़ूम ईवेंट को पकड़ने के लिए आप इसका उपयोग कर सकते हैं

$(window).resize(function() { 
// your code 
});
— user1080381
स्रोत
1
सही काम करता है, मोबाइल उपकरणों पर भी। यह देखना भी काफी दिलचस्प है कि मोबाइल उपकरणों में क्या है devicePixelRatio। इससे मुझे ज़ूम एलिमेंट होने पर, या परिवर्तनों के इनबिल्ट वैल्यू होने पर, एलिमेंट fixedएलिमेंट को एलिमेंट करने के लिए एलिमेंट स्विच करने में भी बहुत मदद मिली । उत्तम! धन्यवाद!! absolutedevicePixelRatio
— लोटेकसून
12
अपेक्षित रूप से काम नहीं करता है: यह मैकबुक पर क्रोम में 200 रेटिना के साथ रिटर्न करता है जब ब्राउज़र ज़ूम नहीं किया जाता है।
— टेरिट
19
उच्च डीपीआई स्क्रीन के समर्थन वाले ब्राउज़र ऐसे प्रदर्शन का उपयोग करते समय अपेक्षित परिणाम नहीं देंगे, न ही प्रदर्शन की परवाह किए बिना सफारी करेंगे।
— फ्रेड्रिक C
बस किसी को भी परवाह है कि IE पर, यह केवल IE11 पर काम करता है (यह IE10 पर या नीचे NaN लौटा देगा)
— scunliffe
3
Math.round(window.devicePixelRatio * 100)Chrome, IE, Edge और Firefox पर काम करता है। IMac पर सफारी हमेशा 200 लौटती है।
— सुपर जेड
45

मेरे लिए, Chrome / Webkit के लिए, document.width / jQuery(document).width()काम नहीं किया। जब मैंने अपनी विंडो को छोटा किया और अपनी साइट पर ज़ूम इन किया तो क्षैतिज स्क्रॉलबार्स दिखाई दिए, document.width / jQuery(document).width()डिफ़ॉल्ट ज़ूम पर 1 के बराबर नहीं था। ऐसा इसलिए है क्योंकि document.widthव्यूपोर्ट के बाहर दस्तावेज़ का हिस्सा शामिल है।

का उपयोग कर window.innerWidthऔर window.outerWidthकाम किया। क्रोम में किसी कारण के लिए, बाहरी पिक्सेल स्क्रीन पिक्सल में मापा जाता है और इनरव्हीड को सीएसएस पिक्सल में मापा जाता है।

var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
  zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
  zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
  zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
  zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
  zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
  zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
  zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
  zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
  zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
  zoomLevel = "5";
} else {
  zoomLevel = "unknown";
}
— user800583
स्रोत
1
बहुत अच्छा। और यदि आपको केवल यह जानना है कि क्रोम में ज़ूम किया गया है या नहीं:isZoomed = (screenCssPixelRatio < .98 || screenCssPixelRatio > 1.02)
— ब्रेंट फॉस्ट
1
खैर, window.outerWidth को ज़ूम के साथ भी बदला जाता है। साथ ही, प्रत्येक OS पर विंडो बॉर्डर की चौड़ाई 8 पिक्सेल नहीं होती है (उसी OS पर डिज़ाइन भिन्न हो सकती है)। हालाँकि मैं दो बार खिड़की की सीमाओं के बाद से 16, 8 नहीं, बल्कि 8 को बदलने का सुझाव दूंगा। इसके अलावा, कुछ ब्राउज़र की वास्तविक रेंडरिंग विंडो (जैसे FF) और कुछ नहीं (सफारी) पर एक सीमा होती है - लेकिन यह भी इस बात पर निर्भर करता है कि आप किस ब्राउज़र पर ब्राउज़र का उपयोग करते हैं (जैसे सफारी में विंडोज पर बॉर्डर है)। प्रारंभिक इनरविदथ (जैसे पेज लोड पर) का बैकअप लेना और इसका उपयोग कामों की तुलना करने के लिए बेहतर है, लेकिन केवल तभी जब जूम 100% हो ...
— स्टैन डे
1
आउटपुट 0 मेरे लिए कोई मायने नहीं रखता (2017, feb)।
— तिबरियू-आयनू स्टेन
1
switchबयान कई बयानों से बेहतर हो सकता है।
— एडिक
यह काम नहीं करता है: बस मैक पर क्रोम पर परीक्षण किया गया है और यह ज़ूम स्तर की परवाह किए बिना हमेशा एक ही अनुपात लौटाता है
— Collimarco
16

मेरे सहकर्मी और मैंने https://github.com/tombigel/detect-zoom से स्क्रिप्ट का उपयोग किया । इसके अलावा, हमने गतिशील रूप से एक svg तत्व बनाया है और इसकी currentScale संपत्ति की जांच की है। यह Chrome पर बहुत अच्छा काम करता है और संभवतः अधिकांश ब्राउज़र भी। FF पर "जूम टेक्स्ट ओनली" फीचर को हालांकि बंद करना होगा। एसवीजी अधिकांश ब्राउज़रों पर समर्थित है। इस लेखन के समय, IE10, FF19 और Chrome28 पर परीक्षण किया गया।

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);
— नीलकंठ
स्रोत
यह विधि अब हमेशा फ़ायरफ़ॉक्स 29 में svg.currentScale = 1 की रिपोर्ट करती है। संभवतः क्योंकि वे ज़ूम के आधार पर संपूर्ण स्क्रीन के आंकड़ों का आकार बदलते हैं जो कि एक बग है । IE11 को डेस्कटॉप डिवाइस व्यूएक्सपेलरैटो पर समायोजित स्क्रीन ऊंचाई के साथ डेस्कटॉप पर एक ही समस्या है जो काफी खराब है।
— हेक्सालिस
11

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

var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;

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

— brianh
स्रोत
4
क्या आप कृपया मीडिया क्वेरी का उपयोग करके वास्तविक ज़ूम का पता लगाने का एक कोड प्रदान कर सकते हैं?
— टीएन।
बस "(चौड़ाई: <X> px) और (ऊंचाई: <Y> px)" का उपयोग करने का प्रयास करें, जहां <x> और <Y> क्रमशः window.innerWidth और window.innerHeight हैं। यह बहुत छोटी मात्रा में ज़ूम के लिए भी काम करता है। सफारी में भी काम करता है।
— अधिकतम
@ max क्या आप एक JSFIddle या नमूना कोड प्रदान कर सकते हैं कि यह एक साथ कैसे दिखता है?
— लोटेकसून
हमेशा मैकबुक प्रो जैसे रेटिना उपकरणों पर सही रिपोर्ट करता है।
— मैथ्यू सैंडर्स
codepen.io/anon/pen/LgrGjJ मीडिया प्रश्नों के साथ एक द्विआधारी खोज दिखाता है, लेकिन यह क्वेरी के समान है devicePixelRatio: यह खाता प्रदर्शन स्केलिंग में लेता है।
— ZachB
11 
zoom = ( window.outerWidth - 10 ) / window.innerWidth

बस इतना ही चाहिए।

— एलेक्स वॉन थॉर्न
स्रोत
10से घटाना क्यों outerWidth?
— कॉलम
शायद स्क्रॉलबार के लिए। प्रत्येक स्क्रॉलबार भी अलग है, जैसे कि iOS में इसका आकार बहुत छोटा है। इसके अलावा यह समाधान केवल क्रोम लगता है
— सारा
1
यदि उपयोगकर्ता FF में बुकमार्क के रूप में साइड बार है तो यह काम नहीं करता है
— Gerrit Sedlaczek
7

मेरे पास जनवरी 2016 तक इसका समाधान है। क्रोम, फ़ायरफ़ॉक्स और एमएस एज ब्राउज़रों में परीक्षण किया गया है।

सिद्धांत इस प्रकार है। 2 माउस पॉइंट्स लीजिए जो बहुत दूर हैं। प्रत्येक माउस इवेंट स्क्रीन और दस्तावेज़ निर्देशांक के साथ आता है। दोनों समन्वय प्रणालियों में 2 बिंदुओं के बीच की दूरी को मापें। यद्यपि ब्राउज़र फ़र्नीचर, दूरी के कारण समन्वय प्रणालियों के बीच परिवर्तनशील निश्चित ऑफसेट हैं यदि पृष्ठ ज़ूम नहीं किया जाता है, तो बिंदुओं के बीच की समान होनी चाहिए। "दूर के अलावा" निर्दिष्ट करने का कारण (मैंने इसे 12 पिक्सेल के रूप में रखा है) ताकि छोटे ज़ूम परिवर्तन (जैसे 90% या 110%) पता लगाने योग्य हों।

संदर्भ: https://developer.mozilla.org/en/docs/Web/Events/mousemove

कदम:

  1. माउस मूव श्रोता जोड़ें

    window.addEventListener("mousemove", function(event) {
    // handle event
});

  2. माउस घटनाओं से 4 माप कैप्चर करें:

    event.clientX, event.clientY, event.screenX, event.screenY

  3. ग्राहक प्रणाली में 2 बिंदुओं के बीच की दूरी d_c मापें

  4. स्क्रीन सिस्टम में 2 बिंदुओं के बीच की दूरी d_s को मापें

  5. यदि d_c! = D_s तब ज़ूम लगाया जाता है। दोनों के बीच का अंतर आपको ज़ूम की मात्रा बताता है।

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

सीमाएं: मान लें कि उपयोगकर्ता माउस को कम से कम हिलाएगा, और ज़ूम इस समय तक अनजान है।

— user1191311
स्रोत
1
मैंने एक फिडेल बनाया: jsfiddle.net/Terite/9b6ko854 जिसका "दूर के अलावा" मतलब 100 पिक्सेल था। दुर्भाग्य से यह रेटिना डिस्प्ले के साथ मैकबुक पर फ़ायरफ़ॉक्स (52) पर अस्थिर काम करता है। यह भी ध्यान दिया जाना चाहिए कि विंडो 7 इंटरफ़ेस ज़ूम 125% क्रोम, फ़ायरफ़ॉक्स और IE11 (ज़ूम 125% जो तब डिफ़ॉल्ट है) में ब्राउज़र ज़ूम के रूप में पाया जाता है।
— टेरेट
आपका
— फिडेल
रेटिना डिस्प्ले कठिनाई का एक और स्तर जोड़ते हैं क्योंकि वे पिक्सेल आकार को गलत तरीके से अन्य चीजों के बीच रिपोर्ट करते हैं।
— user1191311
5

आप दृश्य व्यूपोर्ट API का उपयोग कर सकते हैं :

window.visualViewport.scale;

यह मानक और डेस्कटॉप और मोबाइल दोनों पर काम करता है: ब्राउज़र समर्थन ।

— collimarco
स्रोत
काम लगता है, लेकिन यह अभी भी फ़ायरफ़ॉक्स डेस्कटॉप में डिफ़ॉल्ट रूप से अक्षम है, और 5/31/20 के रूप में इंटरनेट एक्सप्लोरर में काम नहीं करता है।
— derekbaker783
3

Internet Explorer 7, 8 और 9 में, यह काम करता है:

function getZoom() {
    var screen;

    screen = document.frames.screen;
    return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}

राउंडिंग त्रुटियों को रोकने के लिए "+0.9" को जोड़ा जाता है (अन्यथा, आपको ब्राउज़र ज़ूम के 105 और 110% पर सेट होने पर 104% और 109% मिलेगा)।

IE6 में ज़ूम मौजूद नहीं है, इसलिए ज़ूम को चेक करना अनावश्यक है।

— पेंच
स्रोत
1
दिलचस्प। मेरे लिए, यह हमेशा 80% ज़ूम दिखाता है ... मेरा मानना ​​है कि यह इसलिए है क्योंकि मेरे पास विंडोज 7 स्तर पर बड़े फ़ॉन्ट सेटअप हैं (कंट्रोल पैनल में "फ़ॉन्ट आकार" के लिए खोज)। यह @ yonran के जवाब में IE8 समाधान से बेहतर है जो मेरे लिए बिल्कुल भी काम नहीं करता था। jsbin.com/obowof
— ripper234
मुझे 101% मिल रहा है जब ज़ूम 100% पर सेट है।
— एलन वालेस
मैं भी। 0.9 के बजाय 0.4999 का उपयोग करें
— यान बेलवेंस
ieZoomLevel = ((screen.deviceXDPI / screen.systemXDPI) * 100 / 0.4999) .toFixed ();
— यान बेलवेंस
3

मैं क्या लेकर आया हूँ:

1) ( आईडी = zoomdiv ) के position:fixed <div>साथ बनाओwidth:100% ) के

2) जब पेज लोड होता है:

zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth

और यह मेरे लिए ctrl+और के लिए काम कियाctrl- ज़ोम्स के ।

या मैं $(window).onresize()सक्रिय ज़ूम स्तर प्राप्त करने के लिए किसी ईवेंट में लाइन जोड़ सकता हूं

कोड:

<script>
    var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;

    $(window).resize(function(){
        zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
        alert(zoom);    
    });
</script>
<body>
    <div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>

पुनश्च: यह मेरी पहली पोस्ट है, किसी भी गलतियों को क्षमा करें

— अभिषेक बोरर
स्रोत
3
दुर्भाग्य से, यह केवल तभी काम करेगा जब उपयोगकर्ता के पास ब्राउज़र अधिकतम हो ( screen.availWidthस्क्रीन पिक्सेल में स्क्रीन की चौड़ाई रिपोर्ट करता है, ब्राउज़र विंडो नहीं)।
— बेली पार्कर
3

इसने वेबकिट-आधारित ब्राउज़रों (क्रोम, सफारी) में मेरे लिए बहुत अच्छा काम किया है:

function isZoomed() {
    var width, mediaQuery;

    width = document.body.clientWidth;
    mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';

    return !window.matchMedia(mediaQuery).matches;
}

हालांकि फ़ायरफ़ॉक्स में काम करने के लिए प्रतीत नहीं होता है।

यह भी WebKit में काम करता है:

var zoomLevel = document.width / document.body.clientWidth;
— rudolfrck
स्रोत
5
document.widthअपरिभाषित लौटता है
— एडम
हमेशा कोई फर्क नहीं पड़ता कि ज़ूम (2017, फ़ेब, रेटिना डिस्प्ले) सही है।
— टिबेरिउ-आयनो स्टेन
3

असल में, हमारे पास है:

  • window.devicePixelRatioजो ब्राउज़र-स्तर ज़ूम * के साथ-साथ सिस्टम ज़ूम / पिक्सेल घनत्व दोनों को ध्यान में रखता है।
    * - मैक / सफारी ज़ूम स्तर पर ध्यान नहीं दिया जाता है
  • मीडिया के प्रश्नों
  • vw/ vhसीएसएस इकाइयाँ
  • resize ईवेंट, जो ज़ूम स्तर परिवर्तन पर ट्रिगर होता है, खिड़की के प्रभावी आकार का कारण बनता है

यह सामान्य UX के लिए पर्याप्त होना चाहिए । यदि आपको ज़ूम स्तर का पता लगाने की आवश्यकता है जो खराब UI डिज़ाइन का संकेत हो सकता है।

पिच-जूम को ट्रैक करना कठिन है और वर्तमान में इसे नहीं माना जाता है।

— kirilloid
स्रोत
1
window.devicePixelRatio एक अच्छा उत्तर है जो प्रमुख ब्राउज़रों के नवीनतम संस्करण में काम करता है - क्रोम, सफारी, एफएफ, एज, आईई
— डीएसहल्त्ज़
@kirilloid क्या आपको ऐसा कुछ भी मिला जो सफारी में "ज़ूम स्तर" को मज़बूती से खोजने के लिए इस्तेमाल किया जा सकता है?
— onassar
2

पर मोबाइल उपकरणों (Android या ओपेरा मोबाइल के लिए Chrome के साथ) आप से ज़ूम का पता लगा सकते window.visualViewport.scale । https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

सफ़ारी पर पता लगाएँ: document.documentElement.clientWidth / window.innerWidth (डिवाइस पर कोई जूमिंग नहीं होने पर 1 लौटें)।

— जिम
स्रोत
1

आपकी गणना अभी भी कई सीएसएस पिक्सल पर आधारित है। वे अभी स्क्रीन पर एक अलग आकार के हैं। यह पूरे पृष्ठ ज़ूम की बात है।

आप एक 192dpi डिवाइस पर एक ब्राउज़र पर क्या करना चाहते हैं जो आमतौर पर एक छवि में प्रत्येक पिक्सेल के लिए चार डिवाइस पिक्सेल प्रदर्शित करता है? 50% ज़ूम पर यह डिवाइस अब एक डिवाइस पिक्सेल में एक छवि पिक्सेल प्रदर्शित करता है।

— नील
स्रोत
@ नील: मैं 'सीएसएस पिक्सल' आयाम कैसे प्राप्त कर सकता हूं?
— समझो
सीएसएस डिफॉल्ट्स टू पॉइंट्स, लेकिन आप निश्चित रूप से px डायमेंशन संशोधक का उपयोग करके पिक्सेल निर्दिष्ट कर सकते हैं। जावास्क्रिप्ट में पुनर्प्राप्त तत्व गुणों के लिए, ये पहले से ही सीएसएस पिक्सल में होना चाहिए। इसलिए यदि आप एक <div> की चौड़ाई 100px होने के लिए निर्दिष्ट करते हैं, तो वह वही है जो आप जावास्क्रिप्ट से प्राप्त करेंगे, जो भी ज़ूम स्तर हो सकता है।
— नील
1

क्रोम पर

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");
— निकोलस गिज़पेंक
स्रोत
1
केवल तभी काम करता है जब ब्राउज़र विंडो में स्क्रीन की पूरी चौड़ाई होती है।
— टेनबिट्स
0

IE के लिए यह परीक्षण नहीं किया था, लेकिन अगर आप एक तत्व बनाने के elemसाथ

min-width: 100%

फिर 

window.document.width / elem.clientWidth

आपको अपना ब्राउज़र ज़ूम स्तर ( document.body.style.zoomकारक सहित ) देगा।

— डिर्क वैन Oosterbosch
स्रोत
इस परीक्षण किया गया लेकिन उसे ज़ूम elem.clientWidth बढ़ाने के लिए प्रतीत नहीं होता है
— टॉम
0

यह user800583 उत्तर के मद्देनजर Chrome के लिए है ...

मैंने इस समस्या पर कुछ घंटे बिताए और बेहतर दृष्टिकोण नहीं पाया, लेकिन:

  • 16 'ज़ूमलेवल' हैं और 10 नहीं हैं
  • जब क्रोम फुलस्क्रीन / अधिकतम होता है window.outerWidth/window.innerWidth, और जब यह नहीं होता है, तो अनुपात ऐसा लगता है (window.outerWidth-16)/window.innerWidth, हालांकि 1 मामले को 2 के द्वारा संपर्क किया जा सकता है।

तो मैं निम्नलिखित आया ...

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

var snap = function (r, snaps)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return i; }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
);

और अगर आप कारक चाहते हैं:

var snap = function (r, snaps, ratios)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return eval(ratios[i]); }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
            [ 0.25, '1/3', 0.5, '2/3', 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5 ]
);
— jeum
स्रोत
मुझे "window.outerWidth / window.innerWidth" से समस्या थी, जिससे मुझे गलत मूल्य भी मिल रहा था और हो सकता है कि मैं एक iframe में था। इसलिए मैंने जो किया वह मैं मूल विंडो का उपयोग करता हूं और इसने सही उत्तर दिया: window.parent.window.outerWidth / window.parent.window.innerWidth
— yan bellavance
0

मेरे पास यह समाधान केवल मोबाइल के लिए है (Android के साथ परीक्षण किया गया है):

jQuery(function($){

zoom_level = function(){

    $("body").prepend('<div class="overlay" ' +
                'style="position:fixed; top:0%; left:0%; ' +
                'width:100%; height:100%; z-index:1;"></div>');

    var ratio = $("body .overlay:eq(0)").outerWidth() / $(window).width();
    $("body .overlay:eq(0)").remove();

    return ratio;
}

alert(zoom_level());

});

यदि आप चुटकी चाल के बाद ज़ूम स्तर सही चाहते हैं, तो आपको संभवतः रेंडरिंग देरी के कारण थोड़ा समय निर्धारित करना होगा (लेकिन मुझे यकीन नहीं है क्योंकि मैंने इसका परीक्षण नहीं किया है)।

— pmrotule
स्रोत
0

यह उत्तर डिवाइसप्रिक्सल अनुपात के बारे में टिप्पणियों पर आधारित है जो उपयोगकर्ता के 1080381 के उत्तर पर गलत तरीके से वापस आ रहा है।

मैंने पाया कि यह कमांड डेस्कटॉप, सरफेस प्रो 3 और सर्फेस प्रो 4 के साथ काम करते समय भी कुछ उदाहरणों में गलत तरीके से वापस आ रहा था।

मैंने पाया कि यह मेरे डेस्कटॉप पर काम करता है, लेकिन एसपी 3 और एसपी 4 एक दूसरे और डेस्कटॉप से ​​अलग-अलग नंबर दे रहे थे।

मैंने देखा कि यद्यपि SP3 जूम स्तर के डेढ़ गुना के रूप में वापस आ रहा था जिसकी मुझे उम्मीद थी। जब मैंने प्रदर्शन सेटिंग्स पर एक नज़र डाली, तो एसपी 3 वास्तव में मेरे डेस्कटॉप पर 100% के बजाय 150% पर सेट किया गया था।

तो, टिप्पणियों का समाधान आपके द्वारा वर्तमान में जारी मशीन के पैमाने से लौटे ज़ूम स्तर को विभाजित करना चाहिए।

मैं निम्न कार्य करके विंडोज सेटिंग्स में पैमाना प्राप्त करने में सक्षम था:

ManagementObjectSearcher searcher = new ManagementObjectSearcher("SELECT * FROM Win32_DesktopMonitor");
double deviceScale = Convert.ToDouble(searcher.Get().OfType<ManagementObject>().FirstOrDefault()["PixelsPerXLogicalInch"]);
int standardPixelPerInch = 96;
return deviceScale / standardPixelPerInch;

तो मेरे SP3 के मामले में, इस तरह से यह कोड 100% ज़ूम पर दिखता है:

devicePixelRatio = 1.5
deviceScale = 144
deviceScale / standardPixelPerInch = 1.5
devicePixelRatio / (deviceScale / standardPixelPerInch) = 1

User1080381 के मूल उत्तर में 100 से गुणा करने पर आपको 100 (%) का ज़ूम मिलेगा।

— कैमरन वीवर
स्रोत
0

क्या यह वर्तमान में काम कर रहा है लेकिन फिर भी इसे ब्राउज़र द्वारा अलग करने की आवश्यकता है। Chrome (75) और Safari (11.1) पर सफलतापूर्वक परीक्षण किया गया (अभी तक FF के लिए कोई रास्ता नहीं मिला है)। यह रेटिना डिस्प्ले पर जूम वैल्यू को सही करता है और कैलकुलेट को रिसाइज़ इवेंट पर ट्रिगर किया जाता है।

    private pixelRatio() {
      const styleString = "(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)";
      const chromeRatio = (Math.round((this.window.outerWidth / this.window.innerWidth)*100) / 100);
      const otherRatio = (Math.round(window.devicePixelRatio * 100) / 100);
      const resizeValue = (this.isChrome()) ? chromeRatio : otherRatio;

      return resizeValue || (this.window.matchMedia && this.window.matchMedia(styleString).matches ? 2 : 1) || 1;
    }


  private isChrome():boolean {
    return (!!this.window.chrome && !(!!this.window.opera || this.window.navigator.userAgent.indexOf(' Opera') >= 0))
  }

  private chrome() {
    const zoomChrome = Math.round(((this.window.outerWidth) / this.window.innerWidth)*100) / 100;
    return {
      zoom: zoomChrome,
      devicePxPerCssPx: zoomChrome1 * this.pixelRatio()
    };
  }
— योगी
स्रोत
-1

यहाँ यह नहीं बदलता है!

<html>
 <head>
  <title></title>
 </head>
<body>
 <div id="xy" style="width:400px;">
  foobar
 </div>
 <div>
  <button onclick="alert(document.getElementById('xy').style.width);">Show</button>
 </div>
</body>
</html>

एक साधारण HTML फ़ाइल बनाएं, बटन पर क्लिक करें। जूम स्तर की परवाह किए बिना: यह आपको 400px की चौड़ाई दिखाएगा (कम से कम फ़ायरफ़ॉक्स और ie8 के साथ)

@tfl: ऐसा इसलिए है क्योंकि आपने इनलाइन-शैली में चौड़ाई तय कर ली है। मैंने अपना मामला (मूल प्रश्न के अंदर पोस्ट) दिखाने के लिए आपके नमूने को संशोधित किया है।
— समझें
-1

यह किसी की मदद कर सकता है या नहीं भी कर सकता है, लेकिन मेरे पास एक ऐसा पृष्ठ था जिसे मैं सही ढंग से केंद्र में नहीं ला सकता था, चाहे मैंने सीएसएस ट्रिक्स की कोशिश की हो, इसलिए मैंने एक JQuery फ़ाइल कॉल सेंटर पेज लिखा:

समस्या ब्राउज़र के ज़ूम स्तर के साथ हुई, यदि आप 100%, 125%, 150%, आदि के आधार पर पृष्ठ को स्थानांतरित करेंगे।

नीचे दिया गया कोड एक JQuery फ़ाइल में है, जिसे centerpage.js कहा जाता है।

मेरे पेज से मुझे JQuery से लिंक करना था और यह काम पाने के लिए इस फाइल को, भले ही मेरे मास्टर पेज में पहले से ही JQuery का लिंक था।

<title>Home Page.</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/centerpage.js"></script>

centerpage.js:

// centering page element
function centerPage() {
    // get body element
    var body = document.body;

    // if the body element exists
    if (body != null) {
        // get the clientWidth
        var clientWidth = body.clientWidth;

        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var left = (windowWidth - bodyWidth) / 2;

        // this is a hack, but it works for me a better method is to determine the 
        // scale but for now it works for my needs
        if (left > 84) {
            // the zoom level is most likely around 150 or higher
            $('#MainBody').removeClass('body').addClass('body150');
        } else if (left < 100) {
            // the zoom level is most likely around 110 - 140
            $('#MainBody').removeClass('body').addClass('body125');
        }
    }
}


// CONTROLLING EVENTS IN jQuery
$(document).ready(function() {
    // center the page
    centerPage();
});

अगर आप किसी पैनल को केंद्र में रखना चाहते हैं:

// centering panel
function centerPanel($panelControl) {
    // if the panel control exists
    if ($panelControl && $panelControl.length) {
        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var panelHeight = $panelControl.height();
        var panelWidth = $panelControl.width();

        // centering
        $panelControl.css({
            'position': 'absolute',
            'top': (windowHeight - panelHeight) / 2,
            'left': (windowWidth - panelWidth) / 2
        });

        // only need force for IE6
        $('#backgroundPanel').css('height', windowHeight);
    }
}
— user1054326
स्रोत
-1

यह प्रश्न वापस युगों की तरह पोस्ट किया गया था, लेकिन आज जब मैं एक ही उत्तर की तलाश कर रहा था "कैसे और बाहर की घटना में ज़ूम का पता लगाने के लिए", मुझे एक उत्तर नहीं मिला जो सभी ब्राउज़रों को फिट होगा।

अभी तक: फ़ायरफ़ॉक्स / क्रोम / IE8 और IE9 के लिए, ज़ूम इन और आउट विंडो।आर्साइज़ इवेंट को फायर करता है। इसका उपयोग करके कब्जा किया जा सकता है:

$(window).resize(function() {
//YOUR CODE.
});
— भूमि सिंघल
स्रोत
-1

शुद्ध रूप से जावास्क्रिप्ट के साथ DPPX (ज़ूम स्तर) खोजने के लिए फ़ायरफ़ॉक्स 16+ के लिए एक समाधान:

var dppx = (function (precision) {
  var searchDPPX = function(level, min, divisor) {
    var wmq = window.matchMedia;
    while (level >= min && !wmq("(min-resolution: " + (level/divisor) + "dppx)").matches) {
      level--;
    }
    return level;
  };

  var maxDPPX = 5.0; // Firefox 22 has 3.0 as maximum, but testing a bit greater values does not cost much
  var minDPPX = 0.1; // Firefox 22 has 0.3 as minimum, but testing a bit smaller values does not cost anything
  var divisor = 1;
  var result;
  for (var i = 0; i < precision; i++) {
    result = 10 * searchDPPX (maxDPPX, minDPPX, divisor);
    maxDPPX = result + 9;
    minDPPX = result;
    divisor *= 10;
  }

  return result / divisor;
}) (5);
— lexasss
स्रोत
यह मैकबुक पर फ़ायरफ़ॉक्स (52) में रेटिना डिस्प्ले के साथ अपेक्षित रूप से काम नहीं करता है - ज़ूम में नहीं होने पर 2 रिटर्न। मैंने एक
— फिडेल
-1 
function supportFullCss3()
{
    var div = document.createElement("div");
    div.style.display = 'flex';
    var s1 = div.style.display == 'flex';
    var s2 = 'perspective' in div.style;

    return (s1 && s2);
};

function getZoomLevel()
{
    var screenPixelRatio = 0, zoomLevel = 0;

    if(window.devicePixelRatio && supportFullCss3())
        screenPixelRatio = window.devicePixelRatio;
    else if(window.screenX == '0')
        screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
    else
    {
        var scr = window.frames.screen;
        screenPixelRatio = scr.deviceXDPI / scr.systemXDPI;
    }

    //---------------------------------------
    if (screenPixelRatio <= .11){ //screenPixelRatio >= .01 &&
      zoomLevel = "-7";
    } else if (screenPixelRatio <= .25) {
      zoomLevel = "-6";
    }else if (screenPixelRatio <= .33) {
      zoomLevel = "-5.5";
    } else if (screenPixelRatio <= .40) {
      zoomLevel = "-5";
    } else if (screenPixelRatio <= .50) {
      zoomLevel = "-4";
    } else if (screenPixelRatio <= .67) {
      zoomLevel = "-3";
    } else if (screenPixelRatio <= .75) {
      zoomLevel = "-2";
    } else if (screenPixelRatio <= .85) {
      zoomLevel = "-1.5";
    } else if (screenPixelRatio <= .98) {
      zoomLevel = "-1";
    } else if (screenPixelRatio <= 1.03) {
      zoomLevel = "0";
    } else if (screenPixelRatio <= 1.12) {
      zoomLevel = "1";
    } else if (screenPixelRatio <= 1.2) {
      zoomLevel = "1.5";
    } else if (screenPixelRatio <= 1.3) {
      zoomLevel = "2";
    } else if (screenPixelRatio <= 1.4) {
      zoomLevel = "2.5";
    } else if (screenPixelRatio <= 1.5) {
      zoomLevel = "3";
    } else if (screenPixelRatio <= 1.6) {
      zoomLevel = "3.3";
    } else if (screenPixelRatio <= 1.7) {
      zoomLevel = "3.7";
    } else if (screenPixelRatio <= 1.8) {
      zoomLevel = "4";
    } else if (screenPixelRatio <= 1.9) {
      zoomLevel = "4.5";
    } else if (screenPixelRatio <= 2) {
      zoomLevel = "5";
    } else if (screenPixelRatio <= 2.1) {
      zoomLevel = "5.2";
    } else if (screenPixelRatio <= 2.2) {
      zoomLevel = "5.4";
    } else if (screenPixelRatio <= 2.3) {
      zoomLevel = "5.6";
    } else if (screenPixelRatio <= 2.4) {
      zoomLevel = "5.8";
    } else if (screenPixelRatio <= 2.5) {
      zoomLevel = "6";
    } else if (screenPixelRatio <= 2.6) {
      zoomLevel = "6.2";
    } else if (screenPixelRatio <= 2.7) {
      zoomLevel = "6.4";
    } else if (screenPixelRatio <= 2.8) {
      zoomLevel = "6.6";
    } else if (screenPixelRatio <= 2.9) {
      zoomLevel = "6.8";
    } else if (screenPixelRatio <= 3) {
      zoomLevel = "7";
    } else if (screenPixelRatio <= 3.1) {
      zoomLevel = "7.1";
    } else if (screenPixelRatio <= 3.2) {
      zoomLevel = "7.2";
    } else if (screenPixelRatio <= 3.3) {
      zoomLevel = "7.3";
    } else if (screenPixelRatio <= 3.4) {
      zoomLevel = "7.4";
    } else if (screenPixelRatio <= 3.5) {
      zoomLevel = "7.5";
    } else if (screenPixelRatio <= 3.6) {
      zoomLevel = "7.6";
    } else if (screenPixelRatio <= 3.7) {
      zoomLevel = "7.7";
    } else if (screenPixelRatio <= 3.8) {
      zoomLevel = "7.8";
    } else if (screenPixelRatio <= 3.9) {
      zoomLevel = "7.9";
    } else if (screenPixelRatio <= 4) {
      zoomLevel = "8";
    } else if (screenPixelRatio <= 4.1) {
      zoomLevel = "8.1";
    } else if (screenPixelRatio <= 4.2) {
      zoomLevel = "8.2";
    } else if (screenPixelRatio <= 4.3) {
      zoomLevel = "8.3";
    } else if (screenPixelRatio <= 4.4) {
      zoomLevel = "8.4";
    } else if (screenPixelRatio <= 4.5) {
      zoomLevel = "8.5";
    } else if (screenPixelRatio <= 4.6) {
      zoomLevel = "8.6";
    } else if (screenPixelRatio <= 4.7) {
      zoomLevel = "8.7";
    } else if (screenPixelRatio <= 4.8) {
      zoomLevel = "8.8";
    } else if (screenPixelRatio <= 4.9) {
      zoomLevel = "8.9";
    } else if (screenPixelRatio <= 5) {
      zoomLevel = "9";
    }else {
      zoomLevel = "unknown";
    }

    return zoomLevel;
};
— अली
स्रोत
6
कृपया यह भी बताएं कि आपका कोड कैसे काम करता है। अगर कुछ नौसिखिया आपका जवाब पा लें तो यह मददगार होगा।
— DISPLAYNAME
मैंने एक पहेली बनाई: jsfiddle.net/Terite/5n1bk9do @AlexeySh। उल्लेख किया, यह क्रोम (56), फ़ायरफ़ॉक्स (52) में रेटिना डिस्प्ले पर अपेक्षित रूप से काम नहीं करता है। यह सफारी (10) पर ज़ूम इन 0 भी दिखाता है।
— टेरिट
-1

समस्या मॉनिटर के प्रकारों में निहित है, एक 4k मॉनिटर बनाम मानक मॉनिटर। Chrome अब तक सबसे स्मार्ट है, जो यह बताने में सक्षम है कि ज़ूम स्तर का उपयोग करके क्या हैwindow.devicePixelRatio क्या है, जाहिर तौर पर यह बता सकता है कि पिक्सेल घनत्व क्या है और क्या बात करने के लिए उसी संख्या को वापस रिपोर्ट करता है।

अन्य ब्राउज़र, इतना नहीं। IE और एज शायद सबसे खराब हैं, क्योंकि वे ज़ूम स्तर को बहुत अलग तरीके से संभालते हैं। 4k मॉनिटर पर समान आकार का टेक्स्ट प्राप्त करने के लिए, आपको मानक मॉनिटर पर 100% के बजाय, 200% का चयन करना होगा।

मई 2018 तक, यहां मुझे सबसे लोकप्रिय ब्राउज़रों, क्रोम, फ़ायरफ़ॉक्स और IE11 में से कुछ के लिए ज़ूम स्तर का पता लगाना है। मैंने यह बताया है कि ज़ूम प्रतिशत क्या है। IE के लिए, यह 4k मॉनिटरों के लिए 100% रिपोर्ट करता है जो वास्तव में 200% पर हैं, लेकिन पाठ का आकार वास्तव में समान है।

यहाँ एक बेला है: https://jsfiddle.net/ae1hdogr/

यदि कोई अन्य ब्राउज़रों को छुरा लेने और फिडेल को अपडेट करने की परवाह करेगा, तो कृपया ऐसा करें। मेरा मुख्य लक्ष्य इन 3 ब्राउज़रों को यह पता लगाने के लिए कवर करना था कि क्या लोग मेरे वेब एप्लिकेशन का उपयोग करने के लिए 100% से अधिक जूम कारक का उपयोग कर रहे थे और कम ज़ूम वाले कारक का सुझाव देते हुए नोटिस प्रदर्शित कर रहे थे।

— Bill_VA
स्रोत
मैक बुक प्रो पर सफारी (रेटिना स्क्रीन) रिटर्न 0, क्रोम नॉन रेटिना स्क्रीन पर रिटर्न सही ढंग से 100, 90 आदि लगता है
— OZZIE
क्रोम और फ़ायरफ़ॉक्स रेटिना स्क्रीन पर 200 रिटर्न
— OZZIE
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.