सफारी में jQuery के साथ पेज ज़ूम परिवर्तन का पता लगाएं

Question

मुझे एक वेब एप्लिकेशन में सफारी के साथ समस्या है जिसमें एक स्थिति है: निश्चित तत्व। जब पृष्ठ ज़ूम आउट हो जाता है (छोटी 100%) चीजें तोड़ती हैं और फ़ंक्शन को कॉल करके ठीक करने की आवश्यकता होती है। तो मैं उपयोगकर्ता के ज़ूमिंग का पता लगाना चाहता हूं। मैंने कुछ समय पहले में jQueryPlug-यह पाया:

http://mlntn.com/2008/12/11/javascript-jquery-zoom-event-plugin/

http://mlntn.com/demos/jquery-zoom/

यह कीबोर्ड और माउस की घटनाओं है कि एक पृष्ठ ज़ूम स्तर परिवर्तन को जन्म दे सकता का पता लगाता है। काफी उचित। यह वर्तमान एफएफ और आईई पर काम करता है लेकिन सफारी पर नहीं। वर्तमान वेबकिट ब्राउज़र में कुछ ऐसा करने के लिए क्या किया जा सकता है?

Answer 1

यह मोबाइल सफारी के साथ सौदों के बाद से this question का प्रत्यक्ष डुप्लिकेट नहीं है, लेकिन एक ही समाधान काम करेगा।

जब आप में ज़ूम, window.innerWidth निकाला जाता है, लेकिन document.documentElement.clientWidth नहीं है, इसलिए यह है: इसके अलावा (

var zoom = document.documentElement.clientWidth/window.innerWidth; 

, आप onresize ईवेंट हैंडलर का उपयोग करने में सक्षम होना चाहिए या jQuery के .resize()) इस के लिए जाँच करने के लिए:

var zoom = document.documentElement.clientWidth/window.innerWidth; 
$(window).resize(function() { 
    var zoomNew = document.documentElement.clientWidth/window.innerWidth; 
    if (zoom != zoomNew) { 
     // zoom has changed 
     // adjust your fixed element 
     zoom = zoomNew 
    } 
}); 

Answer 2

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

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

Demo

Answer 3

srceen.width निश्चित मान लेकिन जहां के रूप में window.innerWidth मूल्य ज़ूम प्रभाव के अनुसार बदल जाएगा।

$(window).resize(function() { 
    if(screen.width == window.innerWidth){ 
     alert("you are on normal page with 100% zoom"); 
    } else if(screen.width > window.innerWidth){ 
     alert("you have zoomed in the page i.e more than 100%"); 
    } else { 
     alert("you have zoomed out i.e less than 100%"); 
    } 
});