জাভাস্ক্রিপ্টে ব্রাউজারের "জুম" ইভেন্টটি ধরুন

Question

জাভাস্ক্রিপ্ট ব্যবহার করে যখন ব্যবহারকারী কোনও পৃষ্ঠায় জুম পরিবর্তন করে, তখন কি এটি সনাক্ত করা সম্ভব? আমি কেবল একটি "জুম" ইভেন্ট ধরতে এবং তাতে প্রতিক্রিয়া জানাতে চাই (উইন্ডো.অনরাইজ ইভেন্টের অনুরূপ)।

ধন্যবাদ।

Comments

আমি বিশ্বাস করি যে পৃষ্ঠাটি জুম করা অবস্থায় নতুন ব্রাউজারগুলি অনারাইজ ইভেন্টে আগুন জ্বালিয়ে দেয়।

— এপাসকেলো

আমারও একই রকম সমস্যা রয়েছে তবে জুম কখন পরিবর্তন হবে তা আমি কেবল জানতে চাই না, আমার পৃষ্ঠাটি লোড হওয়ার সাথে সাথে আমি জুমটির মানও জানতে চাই।

— নোসরেডনা

সত্যই কোনও সদৃশ নয়। জুম স্তরটি নির্ধারণ না করে ইভেন্টটি ধরার বিষয়ে এখানে প্রশ্ন।

— আসফ লাভি

@ পেসারকেলো - হ্যাঁ, তবে এটি আমার মন্তব্যকে অকার্যকর করে না

— হুরাসকোল

আমি নতুন ব্রাউজারগুলিতে 'অনারসাইজ' ঘটনার বিষয়ে নিশ্চিত করতে চাই। এখনও অবধি আমি নিউসেট ক্রোম (33), এফএফ (28), আইই (9 তম মোডে 11 ​​এবং 11) দেখছি যখন আপনি জুম বা আউট করেন তখন সমস্ত সঠিকভাবে ইভেন্টটি ট্রিগার করে।

— ব্রক

Answer 1

জুম থাকলে সক্রিয়ভাবে সনাক্ত করার কোনও উপায় নেই। আপনি কীভাবে এটি প্রয়োগের চেষ্টা করতে পারেন সে সম্পর্কে আমি এখানে একটি ভাল এন্ট্রি পেয়েছি।

আমি জুম স্তর সনাক্তকরণের দুটি উপায় খুঁজে পেয়েছি। জুম স্তরের পরিবর্তনগুলি সনাক্ত করার একটি উপায় শতাংশের মানগুলি জুম করা হয়নি তার উপর নির্ভর করে। শতাংশের মান ভিউপোর্টের প্রস্থের সাথে সম্পর্কিত এবং পৃষ্ঠা জুম দ্বারা প্রভাবিত হয় না। যদি আপনি দুটি উপাদান ,োকেন, একটি শতাংশে পজিশনযুক্ত এবং একটি পিক্সেলের মধ্যে একই পজিশন সহ, পৃষ্ঠাটি জুম করা হয়ে গেলে তারা আলাদা হয়ে যাবে। উভয় উপাদানের অবস্থানের মধ্যে অনুপাতটি সন্ধান করুন এবং আপনি জুম স্তর পেয়েছেন। পরীক্ষার কেস দেখুন। http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3

উপরের পোস্টের সরঞ্জামগুলি ব্যবহার করে আপনি এটি করতেও পারেন। সমস্যাটি হ'ল আপনি পৃষ্ঠাটি জুম করেছেন কিনা তা নিয়ে কমবেশি শিক্ষিত অনুমান করা। এটি অন্যগুলির তুলনায় কিছু ব্রাউজারে আরও ভাল কাজ করবে।

জুম করার সময় যদি তারা আপনার পৃষ্ঠাটি লোড করে তবে পৃষ্ঠাটি জুম করা হয়েছে কিনা তা বলার উপায় নেই।

Comments

শরীরের জন্য কোনও লোড হ্যান্ডলারের ভিতরে আকারের প্যারামিটারগুলি পরীক্ষা করতে পারে। কৌতূহলজনকভাবে, আইই 8 বনাম 9 ডিবাগিংয়ে এটি উপস্থিত হয় যে শরীরের জন্য অন্রেস হ্যান্ডলারটি আইই 8-তে নথিটি পাস করে, যখন আই 99 ক্রোমের মতো উইন্ডোটিও পাস করে।

— ওয়াল্টার কে

জুম করার সময় আপনি যদি দুটি উপাদানকে একই পজিশনে এবং পৃষ্ঠা লোডগুলিতে রাখেন তবে দুটি উপাদানগুলির মধ্যে কোনও স্থানচ্যুতি হবে না? পৃষ্ঠাটি ইতিমধ্যে জুম করা হয়েছে কিনা তা কি এটি বলবে না?

— বিজয়ন্ত

এছাড়াওdocument.body.offsetWidth

— স্যামি বেঞ্চিরিফ

যখন কোনও ব্যবহারকারী উইন্ডোটির আকার পরিবর্তন করে তখন এই জাতীয় কোনও পদ্ধতি ব্যবহার করাও জ্বলতে পারে, তবে কেন কেবল পুনরায় আকারের ইভেন্ট শ্রোতাদের ব্যবহার করবেন না? যা ক্ষেত্রে এটি একটি কার্যকর সমাধানও able

— হিউলিফারম্যান

Answer 2

আমি জাভাস্ক্রিপ্টের এই টুকরোটি জুম "ইভেন্টগুলি" তে প্রতিক্রিয়া জানাতে ব্যবহার করছি।
এটি উইন্ডো প্রস্থ পোল করে। (এই পৃষ্ঠায় কিছুটা পরামর্শ দেওয়া হয়েছে (যার সাথে ইয়ান এলিয়ট লিঙ্ক করেছেন): http://novemberborn.net/javascript/page-zoom-ff3 [সংরক্ষণাগার] )

আইএম নয়, ক্রোম, ফায়ারফক্স 3.6 এবং অপেরা দিয়ে পরীক্ষা করা হয়েছে।

শুভেচ্ছা, ম্যাগনাস

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

উইন্ডো আকার পরিবর্তন সঙ্গে মিথ্যা ইতিবাচক সম্পর্কে কি?

— gcb

আপনি যখন একটি অনারাইজ হ্যান্ডলার প্রয়োগ করেন তখন আপনি সেই কেসগুলি ফিল্টার করে দিতে পারেন। একটি সমাধানের জন্য বেসিকগুলি এখানে আমি বলতে চাই।

— স্টিজন ডি উইট

@StijndeWitt পড়ার পর এই আমি প্রস্তাবিত পথ বুঝতে, এখন আমি, পুনরায় আকার দেওয়ার ঘটনা ফিল্টার আউট সঙ্গে একটি সমাধান কাজ করছি, বিশেষ করে মোবাইল থেকে শুরু করে করছি। যে কেউ?

— lowtechsun

পুনরায় আকার এবং জুমকে আলাদা করতে আপনি একটি ফাঁক মানটি ব্যবহার করতে পারেন? আমার অর্থ জুমটি তত্ক্ষণাত> এক্স পিক্সেল দ্বারা উইন্ডোর প্রস্থ পরিবর্তন করবে।

— সেবাস্তিয়ান

মিথ্যা ধনাত্মকতা হ'ল একটি বিষয়। দিকের অনুপাত বজায় ছিল কিনা তা যাচাই করে কি এটি সমস্ত মিথ্যা ধনাত্মকতার 99.99% মুছে ফেলবে না? স্ক্রিপ্টটি শেষের অনুপাতটি মনে রাখুক এবং নতুন অনুপাত গণনা করুন এবং সেগুলি একই কিনা তা পরীক্ষা করুন। প্রস্থটি আলাদা হওয়ার সাথে একত্রিত করুন এবং আপনার ভাল বেস হওয়া উচিত

— বিপবট ভন স্ট্র্লিং

Answer 3

ভাল খবর সবাইকিছু মানুষ! নতুন ব্রাউজারগুলি যখন জুম পরিবর্তন করা হয় তখন একটি উইন্ডো আকার পরিবর্তন ইভেন্টটি ট্রিগার করবে।

Comments

অ্যান্ড্রয়েডের জন্য ক্রোম এবং ফায়ারফক্স জুমে পুনরায় আকারের ইভেন্টটি ট্রিগার করবে না।

— lowtechsun

আপনি পুনরায় আকারের ইভেন্টটি ট্রিগার করতে জুম করতে না চাইলে এটি সুসংবাদ নয়।

— রিহেরিক

আরও ভাল সংবাদ হ'ল একটি আসল জুম ইভেন্ট, পুনরায় আকারের ইভেন্ট থেকে পৃথক।

— ভিনসেন্ট

উভয় সত্য। সম্পাদনা করা হয়েছে।

— বেন

কোনওভাবে জুম সেট করা কি সম্ভব?

— ওল্ডবয়

Answer 4

নীচে হিসাবে পিএক্স_রেটিও সংজ্ঞায়িত করা যাক:

পিএক্স অনুপাত = সিএসএস পিএক্স থেকে শারীরিক পিক্সেলের অনুপাত।

যদি কোনও পৃষ্ঠাটি জুম করে, ভিউপোর্ট পিক্সেস (পিক্সেল থেকে পৃথক) কমায় এবং স্ক্রিনে ফিট হওয়া উচিত তাই অনুপাতটি (শারীরিক পিক্সেল / সিএসএস_পিএক্স) আরও বড় হতে হবে।

তবে উইন্ডো রাইজিংয়ে, পর্দার আকার হ্রাস করার পাশাপাশি পিক্সেসও হ্রাস করে। সুতরাং অনুপাত বজায় রাখা হবে।

জুমিং: উইন্ডোজ.স্রিজ ইভেন্ট -> ট্রিগার করুন এবং 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

এটি গ্রহণযোগ্য উত্তর আইএমও হওয়া উচিত। এতদূর নির্দ্বিধায় কাজ করে, ধন্যবাদ! যদি কেউ আগ্রহী gist.github.com/souporserious/b44ea5d04c38c2e7ff32cd1912a17cd0 আগ্রহী হয় তবে এটি একটি কাস্টম ইভেন্টে জড়িয়ে নিন ।

— souporserious

Answer 5

এটি আমার পক্ষে কাজ করে:

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

এটি কেবল আইই 8 তে প্রয়োজন। অন্যান্য সমস্ত ব্রাউজার স্বাভাবিকভাবেই একটি আকার পরিবর্তন ইভেন্ট উত্পন্ন করে।

Answer 6

এটি থেকে নিফটি প্লাগইন তৈরি করা হয়েছে yonranযা সনাক্ত করতে পারে। এখানে স্ট্যাক ওভারফ্লোতে তার পূর্বে উত্তর দেওয়া প্রশ্ন। এটি বেশিরভাগ ব্রাউজারের জন্য কাজ করে। অ্যাপ্লিকেশন এই হিসাবে সহজ

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

অ্যান্ড্রয়েড ৪.৪.২ এর জন্য ফায়ারফক্সে কাজ করে না। মোবাইলের জন্য এফএফ Always enable zoomএ অ্যাক্সেসিবিলিটি বিকল্পে বোতামটি টিক দিন । ডেমো পরিবর্তনের বিষয়ে প্রতিক্রিয়া জানাবে না।

— lowtechsun

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

আইওএস 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% হ'ল ক্ষুদ্রতম পরিমাণ যা ব্রাউজারটি যে কোনও ক্ষেত্রে জুম করবে, তবে এটি স্পষ্ট নয় যে এটি অন্যান্য ব্রাউজারগুলির ক্ষেত্রে সত্য। এফআই, সর্বদা আপনার কোডটি পরীক্ষা করা হয়েছে তা নিশ্চিত করুন এবং এটির প্রতিরক্ষা বা উন্নতি করতে প্রস্তুত থাকুন।

— নলো

আকর্ষণীয় পদ্ধতির

— oldboy

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

এটি দেখতে খুব সুন্দর সমাধানের মতো মনে হচ্ছে এবং একটি প্রক্সি দিয়ে আপনার এমনকি আপনার ইন্টারসেপ্টারের সাহায্যে বিধবা সম্পত্তি কুঁচকানোর দরকারও পড়বে না - আমরা কি নিশ্চিতভাবে জানতে পারি যে ব্যবহারকারী যখন জুম হয়েছে তখন ডিপিআর আপডেট করা যা সমস্ত ব্রাউজারগুলি করা উচিত / করা উচিত? এর .. সেই ধারণাটি স্ক্র্যাচ করুন - উইন্ডোটিকে প্রক্সিয়া করা যায় না, সম্ভবত "ম্যাচমিডিয়া" ব্যবহার করে কোনও সমাধান উপস্থিত হতে পারে তবে এটি যেহেতু সত্য / মিথ্যা বিষয়, তাই আপনি কীভাবে কোনও অ্যানালগ মানের পরিবর্তনের জন্য পরীক্ষা করতেন তা নিশ্চিত নই ডিপিআর ...

— জন z

Answer 13

পুনরায় আকারের ইভেন্টটি আধুনিক ব্রাউজারগুলিতে ইভেন্টটি সংযুক্ত করে windowএবং তারপরে এর মানগুলি bodyবা অন্য উপাদানগুলির উদাহরণ সহ পাঠ করে কাজ করে ( .getBoundingClientRect () ) ।

কিছু পূর্ববর্তী ব্রাউজারগুলিতে যে কোনও এইচটিএমএল উপাদানগুলিতে পুনরায় আকারের ইভেন্ট হ্যান্ডলারের নিবন্ধকরণ করা সম্ভব হয়েছিল। অনারাইজ বৈশিষ্ট্যগুলি সেট করা বা যেকোন উপাদানটিতে হ্যান্ডলার সেট করতে অ্যাডএভেন্টলিস্টনার () ব্যবহার করা এখনও সম্ভব। যাইহোক, আকার পরিবর্তন ইভেন্টগুলি কেবল উইন্ডো অবজেক্টে (যেমন ডকুমেন্ট.ডেফাল্টভিউ দ্বারা ফিরে আসে) গুলি চালিত হয়। উইন্ডো অবজেক্টে নিবন্ধিত হ্যান্ডলাররা কেবল পুনরায় আকারের ইভেন্টগুলি পাবেন ।

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

অন্য একটি বিকল্প : রেজাইজঅবার্সার এপিআই

আপনার বিন্যাসের উপর নির্ভর করে আপনি কোনও নির্দিষ্ট উপাদানটির আকার পরিবর্তন করতে দেখতে পারেন।

এটি "প্রতিক্রিয়াশীল" লেআউটগুলিতে ভাল কাজ করে, কারণ জুম করার সময় ধারক বাক্সটি পুনরায় আকার দেয়।

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>

---

ব্যবহারকারীর অঙ্গভঙ্গি ইভেন্টগুলি থেকে জাভাস্ক্রিপ্টের কাজগুলি ওভারলোড না করার বিষয়ে সতর্ক হন। আপনার যখনই পুনরায় আঁকার দরকার হবে তখন অনুরোধঅ্যানিমেশনফ্রেম ব্যবহার করুন ।

Answer 14

MDN মতে, "matchMedia" এই কাজ করতে সঠিক উপায় https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#Monitoring_screen_resolution_or_zoom_level_changes

এটি কিছুটা চূড়ান্ত কারণ কারণ প্রতিটি উদাহরণ একবারে কেবল একটি এমকিউ দেখতে পারে, তাই যদি আপনি আগ্রহী হন কোনও জুম স্তরের পরিবর্তনে একগুচ্ছ ম্যাচার তৈরি করতে হবে .. তবে যেহেতু ব্রাউজারটি ঘটনাগুলি নির্গত করার দায়িত্বে রয়েছে সম্ভবত এটি সম্ভবত ভোটদানের চেয়ে আরও পারফরম্যান্ট এবং আপনি কলব্যাকটি কলব্যাক করতে পারেন বা কলব্যাক শুরু করতে পারেন বা এনিমেশন ফ্রেমে বা কোনও কিছুতে এটি পিন করতে পারেন - এখানে এমন একটি বাস্তবায়ন রয়েছে যা বেশ সুন্দর বলে মনে হচ্ছে, _ত্রোটলে অদলবদল করতে পারেন বা আপনি যদি ইতিমধ্যে এর উপর নির্ভর করে থাকেন তবে যাই হোক না কেন।

কোড স্নিপেটটি চালান এবং আপনার ব্রাউজারে জুম বাড়ান এবং আউট করুন, মার্কআপে আপডেট হওয়া মানটি নোট করুন - আমি এটি ফায়ারফক্সেই পরীক্ষা করেছি! আপনি যদি কোন সমস্যা দেখতে পান তবে লেমমে জানুন।

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

উপরের কোডটি '10px' হরফের আকার দেয় যখন পর্দাটি প্রায় 125% জুম করা হয়। '1000px' এর মান পরিবর্তন করে আপনি বিভিন্ন জুম স্তরের জন্য পরীক্ষা করতে পারেন।

Comments

max-widthজুম অনুপাতের মধ্যে কী সম্পর্ক ?

— 11:56

এই কোডটি প্রতিটি <1000px স্ক্রিনে কার্যকর করা হবে এবং জুমের সাথে কিছুই করার নেই

— আর্টুর স্টারি

@ আর্টারস্টারি ব্রাউজারটি জুম করা হয়েছে কিনা তা সনাক্ত করার কোনও উপায় নেই তবে অনেকগুলি কার্যপ্রণালী রয়েছে এবং এর মধ্যে একটি হ'ল আমি আমার উত্তরে উল্লেখ করেছি। তদুপরি, আমি বলেছিলাম যে আপনি বিভিন্ন স্ক্রিনের আকারগুলি পরীক্ষা করতে 1000px এর মান পরিবর্তন করতে পারেন যা বিভিন্ন জুম স্তরের প্রভাব দেবে

— সওমিল