সমস্ত আধুনিক ব্রাউজারে পৃষ্ঠা জুম স্তর কীভাবে সনাক্ত করবেন?

310

  1. আমি কীভাবে সমস্ত আধুনিক ব্রাউজারে পৃষ্ঠা জুম স্তর সনাক্ত করতে পারি? এই থ্রেডটি কীভাবে আই 7 এবং আই 8 তে করবেন তা জানায়, আমি কোনও ভাল ক্রস ব্রাউজার সমাধান খুঁজে পাই না।

  2. ফায়ারফক্স ভবিষ্যতে অ্যাক্সেসের জন্য পৃষ্ঠা জুম স্তর সংরক্ষণ করে। প্রথম পৃষ্ঠার লোডে, আমি কি জুম স্তর পেতে সক্ষম হব? পৃষ্ঠাটি লোড হওয়ার পরে যখন একটি জুম পরিবর্তন ঘটে তখন কোথাও আমি এটি পড়ি works

  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% জুমে একটি ডিআইভির মাত্রা জানতে চাই।
— understack
4
মূলত 2019 সালে জুম সনাক্ত করার কোনও উপায় নেই : আমি ম্যাক ক্যাটালিনায় ক্রোম 78 এ নীচের সমস্ত সমাধান পরীক্ষা করেছি এবং সেগুলির কোনওটিই কাজ করে নি।
— কলিমার্কো

উত্তর:

274

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

সম্পাদনা (২০১১-১১-১২): আমি ক্লোন করা যেতে পারে এমন একটি প্রকল্প যুক্ত করেছি: https://github.com/tombigel/detect-zoom

  • আইই 8 : screen.deviceXDPI / screen.logicalXDPI(বা, ডিফল্ট জুমের তুলনায় জুম স্তরের জন্য screen.systemXDPI / screen.logicalXDPI)
  • আই 7 : var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;( এই উদাহরণ বা এই উত্তরের জন্য ধন্যবাদ )
  • কেবলমাত্র FF3.5 : screen.width/ মিডিয়া ক্যোয়ারীর পর্দার প্রস্থ (নীচে দেখুন) ( screen.widthডিভাইস পিক্সেল ব্যবহার করে তবে এমকিউ প্রস্থে সিএসএস পিক্সেল ব্যবহার করা হয়েছে - কির্কস্মোড প্রস্থের জন্য ধন্যবাদ )
  • FF3.6 : কোনও জ্ঞাত পদ্ধতি নেই
  • এফএফ 4 + : মিডিয়া বাইনারি অনুসন্ধানগুলি অনুসন্ধান করে (নীচে দেখুন)
  • ওয়েবকিট : https://www.chromestatus.com/feature/5737866978131968 (মন্তব্যগুলিতে তেওকে ধন্যবাদ)
  • ওয়েবকিট : এর সাথে ডিভের পছন্দসই আকারটি মাপুন -webkit-text-size-adjust:none।
  • ওয়েবকিট : ( r72591 সাল থেকে ভাঙা ) document.width / jQuery(document).width()( উপরে ডার্ক ভ্যান অস্টারবোসকে ধন্যবাদ ) ডিভাইসটিতে পিক্সেল পরিপ্রেক্ষিতে অনুপাত পেতে (পরিবর্তে ডিফল্ট জুম আপেক্ষিক), সংখ্যাবৃদ্ধি window.devicePixelRatio।
  • পুরাতন ওয়েবকিট? (যাচাই করা হয়নি): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth( এই উত্তর থেকে )
  • অপেরা : document.documentElement.offsetWidth/ একটি position:fixed; width:100%ডিভের প্রস্থ । এখান থেকে ( কুইরকসমোডের প্রস্থের সারণীটি বলছে এটি একটি ত্রুটিযুক্ত; অভ্যন্তরীণ প্রস্থটি সিএসএস পেক্স হতে হবে)। আমরা অবস্থানটি ব্যবহার করি: স্ক্রোলবারগুলি রয়েছে এমন স্থান সহ ভিউপোর্টের প্রস্থের জন্য নির্দিষ্ট উপাদান ; ডকুমেন্ট.ডোকামেন্টএলিমেন্ট.ক্লিয়েন্টউইথ এই প্রস্থকে বাদ দেয়। এটি ২০১১ সালের কিছু সময় থেকে ভেঙে গেছে; আমি আর অপেরাতে জুম স্তর পাওয়ার কোনও উপায় জানি না।
  • অন্যান্য : সেবাস্তিয়ান থেকে ফ্ল্যাশ সমাধান
  • অবিশ্বাস্য: মাউস ইভেন্টগুলি শুনুন এবং স্ক্রিনএক্সের পরিবর্তন / ক্লায়েন্টএক্সে পরিবর্তন পরিমাপ করুন

ফায়ারফক্স ৪-এর জন্য এখানে বাইনারি অনুসন্ধান করা হয়েছে, যেহেতু এটির যে কোনও পরিবর্তনশীল যেখানে প্রকাশ হয়েছে তা আমি জানি না:

<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
@ ইউনরান দুর্দান্ত প্লাগইন !, তবে এটি আই 9 তে কাজ করে না এটির zoom: screen.deviceXDPI / screen.logicalXDPI,পরিবর্তে হওয়া উচিতzoom: screen.systemXDPI / screen.logicalXDPI,
— ড্যানিয়েল
1
@ রবডাব্লু, যখন আমি প্রথম এটি ফায়ারফক্স 4 এর জন্য লিখেছিলাম, ফায়ারফক্স ছিল না matchMedia। পল আইরিশ একটি লিখেছিলেন অনুরূপ matchMedia polyfill তারই একটি অংশ Modernizr ।
— yonran
7
সুখবর, সবাই! তারা শেষ করেছে! ভিওপোর্ট এপিআই! 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
— lowtechsun
12
প্রত্যাশার মতো কাজ করে না: ব্রাউজার জুম করা হয়নি এমন সময় এটি রেটিনার সাথে ম্যাকবুকের ক্রোমে 200 ফিরিয়ে দেয়।
— টেরিট
19
উচ্চ ডিপিআই স্ক্রিনগুলির জন্য সমর্থনযুক্ত ব্রাউজারগুলি এই জাতীয় ডিসপ্লে ব্যবহার করার সময় প্রত্যাশিত ফলাফল দেয় না, সাফারি প্রদর্শন ছাড়াই নির্ধারণ করবে না।
— ফ্রেডরিক সি
যে কেউ
— উদ্বিগ্ন
3
Math.round(window.devicePixelRatio * 100)ক্রোম, আইই, এজ এবং ফায়ারফক্সে কাজ করে। আইম্যাকের সাফারি সর্বদা 200 ফেরত দেয়
— সুপার জেড
45

আমার জন্য, ক্রোম / ওয়েবকিটের জন্য, কার্যকর 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
ওয়েল, উইন্ডো.উটারউইথটি জুমের সাথেও পরিবর্তন করা হয়েছে। এছাড়াও, প্রতিটি ওএসে নয় উইন্ডো সীমানা প্রস্থ 8 পিক্সেল (এমনকি একই ওএসেও নকশাটি বিভিন্ন রকম হতে পারে)। তবে আমি 8 টি নয়, 16 টি সাবস্ট্রাক্ট করার পরামর্শ দেব কারণ আপনার উইন্ডোর দু'বার সীমানা রয়েছে। এছাড়াও, কিছু ব্রাউজারের প্রকৃত রেন্ডারিং উইন্ডোতে (যেমন এফএফ) এবং কিছু না (সাফারি) একটি সীমানা থাকে - তবে এটি নির্ভর করে যে আপনি কোন ওএসটি ব্রাউজারটি ব্যবহার করেন (যেমন উইন্ডোজে সাফারির একটি সীমানা রয়েছে)। প্রাথমিক অভ্যন্তরীণ প্রস্থকে ব্যাক আপ করা (যেমন পৃষ্ঠার লোডে) এবং এটি আরও ভাল কাজের তুলনা করতে ব্যবহার করুন তবে কেবলমাত্র ইনিশনাল জুম যদি 100% ছিল ...
— স্ট্যান ই
1
আউটপুট 0 আমার জন্য কি তা বিবেচনা (2017, ফেব্রু)।
— টিবিরিউ-আয়নু স্টান
1
switchঅন্য বিবৃতি যদি বিবৃতি অনেকের চেয়ে ভাল হতে পারে।
— এড্রিক
এটি কাজ করে না: ম্যাকের
— ক্রোমটিতে
16

আমার সহকর্মী এবং আমি https://github.com/tombigel/detect-zoom থেকে স্ক্রিপ্টটি ব্যবহার করেছি । তদতিরিক্ত, আমরা গতিশীলভাবে একটি এসভিজি উপাদান তৈরি করেছি এবং এর বর্তমানস্কেল সম্পত্তিটিও যাচাই করি। এটি ক্রোম এবং সম্ভবত বেশিরভাগ ব্রাউজারে দুর্দান্ত কাজ করে। এফএফ-তে "কেবলমাত্র জুম পাঠ্য" বৈশিষ্ট্যটি বন্ধ করতে হবে। এসভিজি বেশিরভাগ ব্রাউজারে সমর্থিত । এই লেখার সময়, আই 10, এফএফ 19 এবং ক্রোম 28 এ পরীক্ষা করা হয়েছে।

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);
— স্থূলবুদ্ধি বাচাল ব্যক্তি
সূত্র
এই পদ্ধতিটি এখন ফায়ারফক্স ২৯-এ সর্বদা এসভিজি কোডারেন্টস্কেল = 1 এর প্রতিবেদন করে। সম্ভবত এটি কারণ এটি জুমের উপর ভিত্তি করে পুরো স্ক্রীন চিত্রগুলি পুনরায় আকার দেয় যা কোনও বাগ । আইই 11 এর ডেস্কটপে একই সমস্যাটি ভিউপোর্ট ডিভাইস পিক্সেল রেটিওর সাথে সামঞ্জস্য করা পর্দার উচ্চতার সাথে একই সমস্যা রয়েছে যা বেশ স্ক্রু হয়েছে।
— hexalys
11

আমি এই নিবন্ধটি অত্যন্ত সহায়ক বলে মনে করেছি। ইওরনকে প্রচুর ধন্যবাদ। তিনি যে কয়েকটি কৌশল সরবরাহ করেছিলেন তা বাস্তবায়নের সময় আমি যে অতিরিক্ত অতিরিক্ত শিক্ষার সন্ধান পেয়েছি তা পাস করতে চেয়েছিলাম। এফএফ 6 এবং ক্রোম 9-এ, জেএস থেকে মিডিয়া ক্যোয়ারীগুলির জন্য সমর্থন যুক্ত করা হয়েছিল, যা এফএফের জুম নির্ধারণের জন্য প্রয়োজনীয় মিডিয়া ক্যোয়ারী পদ্ধতির সহজতর করতে পারে। MDN এ ডক্স দেখুন এখানে । আমার উদ্দেশ্যগুলির জন্য, আমি কেবল ব্রাউজারটি জুম জুম ইন বা আউট ছিল কিনা তা সনাক্ত করার দরকার ছিল, আমার আসল জুম ফ্যাক্টরের কোনও প্রয়োজন ছিল না। আমি জাভাস্ক্রিপ্টের একটি লাইন দিয়ে আমার উত্তর পেতে সক্ষম হয়েছি:

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

এটি আইই 8 + এবং ওয়েবকিট সমাধানগুলির সাথে একত্রীকরণ, যা একক লাইনও ছিল, আমি কেবলমাত্র কয়েকটি লাইন কোডের সাহায্যে আমাদের অ্যাপ্লিকেশনটিতে প্রচুর পরিমাণে ব্রাউজারে জুম সনাক্ত করতে সক্ষম হয়েছি।

— brianh
সূত্র
4
আপনি কি দয়া করে মিডিয়া ক্যোয়ারী ব্যবহার করে প্রকৃত জুম সনাক্ত করতে একটি কোড সরবরাহ করতে পারেন?
— টিএন
কেবলমাত্র "(প্রস্থ: <এক্স> পিএক্স) এবং (উচ্চতা: <Y> px)" যেখানে <X> এবং <Y> যথাক্রমে উইন্ডো.innerwidth এবং window.innerHight হিসাবে ব্যবহার করার চেষ্টা করুন। এটি খুব ক্ষুদ্র পরিমাণে জুমের জন্যও কাজ করে। সাফারিতেও কাজ করে।
— সর্বাধিক
@ ম্যাক্স আপনি কীভাবে জেএসএফআইডেল বা নমুনা কোড সরবরাহ করতে পারেন এটি কীভাবে একসাথে রাখে দয়া করে?
— লোতেচসুন
সর্বদা রেটিনা ডিভাইসগুলিতে ম্যাকবুক প্রো হিসাবে সত্য রিপোর্ট করে।
— ম্যাথু স্যান্ডার্স
codepen.io/anon/pen/LgrGjJ মিডিয়া অনুসন্ধানগুলির সাথে একটি বাইনারি অনুসন্ধান দেখায়, তবে devicePixelRatioএটি অনুসন্ধানের মতোই : এটি অ্যাকাউন্টে প্রদর্শন স্কেলিংয়ে নেয় takes
— ZachB
11 
zoom = ( window.outerWidth - 10 ) / window.innerWidth

আপনার এটাই দরকার।

— অ্যালেক্স ভন কাঁটা
সূত্র
কেন 10থেকে বিয়োগ outerWidth?
— কলম্ব
সম্ভবত স্ক্রোলবারের জন্য। প্রতিটি স্ক্রোলবারও আলাদা, আইওএসের মতো এটির চেয়েও ছোট। প্লাস এই সমাধানটি কেবল ক্রোম বলে মনে হচ্ছে
— সারা
1
যদি এফএফ
— গেরিট সেডালাকিজেক
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% ব্রাউজার জুম হিসাবে ক্রোম, ফায়ারফক্স এবং আই 11 (জুমে 125% যা ডিফল্ট হয়) তে সনাক্ত করা হয়।
— টেরিট
আপনার
— ফিডাল
রেটিনা প্রদর্শনগুলি অন্য স্তরের অসুবিধা যুক্ত করে কারণ তারা অন্যান্য জিনিসের মধ্যে পিক্সেল আকারকে ভুলভাবে প্রতিবেদন করে।
— ব্যবহারকারী 1191311
5

আপনি ভিজ্যুয়াল ভিউপোর্ট এপিআই ব্যবহার করতে পারেন :

window.visualViewport.scale;

এটি স্ট্যান্ডার্ড এবং ডেস্কটপ এবং মোবাইল উভয় ক্ষেত্রেই কাজ করে: ব্রাউজার সমর্থন ।

— collimarco
সূত্র
অসাধ্য লাগছে তবে এটি ফায়ারফক্স ডেস্কটপে ডিফল্টরূপে অক্ষম রয়েছে এবং 5/31/20 পর্যন্ত ইন্টারনেট এক্সপ্লোরারে কাজ করে না।
— derekbaker783
3

ইন্টারনেট এক্সপ্লোরার 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% পাবেন)।

আই 6 এ জুম বিদ্যমান নেই, তাই জুমটি পরীক্ষা করা অপ্রয়োজনীয়।

— pench
সূত্র
1
মজাদার. আমার জন্য এটি সর্বদা ৮০% জুম দেখায় ... আমি বিশ্বাস করি এটি হ'ল কারণ আমার উইন্ডোজ level স্তরে বড় ফন্ট সেটআপ রয়েছে (নিয়ন্ত্রণ প্যানেলে "ফন্টের আকার" অনুসন্ধান করুন)। @ ইয়োনরানের উত্তরে আইই 8 সমাধানের চেয়ে এটি আরও ভাল যা আমার পক্ষে মোটেও কার্যকর হয়নি। jsbin.com/obowof
— ripper234
জুমটি 100% এ সেট করা হলে আমি 101% পাচ্ছি।
— অ্যালেন ওয়ালেস
আমিও.
— ০.৯৯৯৯ এর
ieZoomLevel = ((স্ক্রিন। ডিভাইসএক্সপিডিআই / স্ক্রিন.সিস্টেম এক্সডিপিআই) * 100 + 0.4999)। টু ফিক্সড ();
— ইয়ান বেলভান্স
3

আমি যা নিয়ে এসেছি তা হ'ল:

1) ( আইডি = জুমদিভ ) 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>

PS: এটি আমার প্রথম পোস্ট, কোনও ভুল ক্ষমা করে দিন

— অভিষেক বোরার
সূত্র
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;
}

যদিও ফায়ারফক্সে কাজ করছে বলে মনে হচ্ছে না।

এটি ওয়েবকিটেও কাজ করে:

var zoomLevel = document.width / document.body.clientWidth;
— rudolfrck
সূত্র
5
document.width
— অ্যাডাম 20
জুম (2017, ফেব, রেটিনা প্রদর্শন) নির্বিশেষে সর্বদা সত্য ফেরায়।
— টিবিরিউ-আয়নু স্টান
3

মূলত, আমাদের রয়েছে:

  • window.devicePixelRatioযা ব্রাউজার-স্তরের জুম * পাশাপাশি সিস্টেম জুম / পিক্সেল ঘনত্ব উভয়ই গ্রহণ করে।
    * - ম্যাক / সাফারি জুম স্তরে আমলে নেওয়া হয় না
  • মিডিয়া প্রশ্নের
  • vw/ vhসিএসএস ইউনিট
  • resize ইভেন্ট, যা জুম স্তর পরিবর্তনের উপর ট্রিগার করা হয়েছে, উইন্ডো পরিবর্তনের কার্যকর আকারের কারণ ঘটায়

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

পিচ-জুম ট্র্যাক করা আরও শক্ত এবং বর্তমানে বিবেচনা করা হয় না।

— kirilloid
সূত্র
1
উইন্ডো.ডভাইসপিক্সেল রেটিও একটি ভাল উত্তর যা প্রধান ব্রাউজারগুলির সর্বশেষ সংস্করণে কাজ করে - ক্রোম, সাফারি, এফএফ, এজ, আইই
— ডিএসহল্টজ
@ কিরিলয়েড আপনি কি এমন কিছু খুঁজে পেয়েছেন যা সাফারিতে "জুম স্তর" নির্ভরযোগ্যতার জন্য ব্যবহার করতে পারে?
— onassar
2

উপর মোবাইল ডিভাইস (Android বা অপেরা মোবাইলের জন্য Chrome এর সঙ্গে) আপনি জুম সনাক্ত করা সম্ভব window.visualViewport.scale । https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

সাফারি শনাক্ত করুন: ডকুমেন্ট.ডোকমেন্টএলমেন্ট.ক্লিনটভিডথ / উইন্ডো.ইন.ইনারউইথ (ডিভাইসে জুম না করা হলে 1 ফিরিয়ে দিন)।

— জিম
সূত্র
1

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

আপনি 192dpi ডিভাইসে ব্রাউজারে কী ঘটতে চান যা সাধারণত একটি চিত্রের প্রতিটি পিক্সেলের জন্য চারটি ডিভাইস পিক্সেল প্রদর্শন করে? 50% জুমে এই ডিভাইসটি এখন একটি ডিভাইস পিক্সালে একটি চিত্র পিক্সেল প্রদর্শন করে।

— নিল
সূত্র
@ নীল: আমি কীভাবে 'সিএসএস পিক্সেল' মাত্রা পেতে পারি?
— understack
সিএসএস পয়েন্টগুলিতে ডিফল্ট হয় তবে আপনি অবশ্যই পিক্সেলটি পিক্সেল ডাইমেনশন মডিফায়ার ব্যবহার করে নির্দিষ্ট করতে পারেন। জাভাস্ক্রিপ্টে পুনরুদ্ধারকৃত উপাদান বৈশিষ্ট্যগুলির জন্য, এগুলি ইতিমধ্যে সিএসএস পিক্সেলগুলিতে হওয়া উচিত। সুতরাং আপনি যদি কোনও <ডিভ> এর প্রস্থ 100px নির্দিষ্ট করে থাকেন তবে জুম স্ক্রিপ্ট থেকে আপনি ফিরে পাবেন, জুম স্তরটি যাই হোক না কেন।
— নিল
1

ক্রোমে

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");
— নিকোলাস গিজ্পেনেক
সূত্র
1
ব্রাউজার উইন্ডোটির পর্দার পুরো প্রস্থ থাকবে কেবল তখনই কাজ করে।
— tenbits
0

IE এর জন্য এটি পরীক্ষা করে নি তবে আপনি যদি একটি উপাদান elemদিয়ে থাকেন

min-width: 100%

তারপর 

window.document.width / elem.clientWidth

আপনাকে আপনার ব্রাউজার জুম স্তর দেবে ( document.body.style.zoomফ্যাক্টর সহ )।

— ডার্ক ভ্যান অস্টেরবোস্চ
সূত্র
এটি পরীক্ষা করা হয়েছে তবে জুম জুম করলে মনে হয় না এগারোটি
— টম
0

এই জন্য ক্রোম জন্ম WAKE user800583 উত্তর ...

আমি এই সমস্যাটিতে কয়েক ঘন্টা ব্যয় করেছি এবং এর থেকে ভালতর পদ্ধতির সন্ধান পাইনি তবে:

  • এখানে 16 টি 'জুমলিভিল' রয়েছে এবং 10 টি নেই
  • ক্রোম যখন পূর্ণস্ক্রিন হয় / সর্বাধিক হয় তখন অনুপাতটি হয় window.outerWidth/window.innerWidthএবং যখন তা হয় না, অনুপাতটি মনে হয় (window.outerWidth-16)/window.innerWidthতবে 1 ম কেসটি ২ য় এর সাথে যোগাযোগ করা যেতে পারে।

সুতরাং আমি নিম্নলিখিত এসেছি ...

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

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
সূত্র
"উইন্ডো.উটারউইথ / উইন্ডো.ইন.ইনারউইথ" নিয়ে আমার সমস্যা হয়েছিল আমাকেও ভুল মান দেয় এবং তা হতে পারে কারণ আমি আইফ্রেমে ছিলাম। সুতরাং আমি যা করেছি তা হ'ল আমি প্যারেন্ট উইন্ডোটি ব্যবহার করেছি এবং এটি সঠিক উত্তর দিয়েছে: উইন্ডো.প্যারেন্ট.উইন্ডো.উটারউইথ / উইন্ডো.প্যারেন্ট.উইন্ডো.ইনইনউইথ
— ইয়ান বেলভেন্স
0

আমার কাছে কেবল মোবাইলের জন্য এই সমাধান রয়েছে (অ্যান্ড্রয়েড দিয়ে পরীক্ষা করা):

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 একে অপরকে এবং ডেস্কটপ থেকে আলাদা নম্বর দিচ্ছিল।

আমি লক্ষ্য করেছি যে এসপি 3 জুম স্তরের আমি প্রত্যাশা করছিলাম বলে দেড় গুন হিসাবে ফিরে আসছিল। আমি যখন ডিসপ্লে সেটিংসটি একবার দেখে নিই, এসপি 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;

সুতরাং আমার এসপি 3 এর ক্ষেত্রে, এই কোডটি 100% জুমের মতো দেখায়:

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

ব্যবহারকারী 1080381 এর মূল উত্তরে 100 দ্বারা গুণ করলে আপনার 100 (একটি) জুম দেবে।

— ক্যামেরন ওয়েভার
সূত্র
0

এটি বর্তমানে কাজ করছেন তবে এখনও ব্রাউজার দ্বারা পৃথক করা প্রয়োজন। ক্রোম (75) এবং সাফারি (11.1) এ সফলভাবে পরীক্ষিত (এখনও এফএফের জন্য কোনও উপায় খুঁজে পায়নি)। এটি রেটিনা ডিসপ্লেতে জুম মানটি সঠিক হয়ে যায় এবং পুনরায় আকারের ইভেন্টে গণনাগুলি ট্রিগার করা হয়।

    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>

একটি সাধারণ এইচটিএমএল ফাইল তৈরি করুন, বোতামে ক্লিক করুন। কোন জুম স্তর নির্বিশেষে: এটি আপনাকে 400px প্রস্থ (কমপক্ষে ফায়ারফক্স এবং ie8 সহ) দেখায়

@ টিএফএল: কারণ আপনি ইনলাইন-স্টাইলে প্রস্থ স্থির করেছেন। আমার কেসটি দেখানোর জন্য আমি আপনার নমুনাটি পরিবর্তন করেছি (মূল প্রশ্নের ভিতরে পোস্ট করা)।
— understack
-1

এটি কাউকে সাহায্য করতে পারে বা নাও পারে, তবে আমার একটি পৃষ্ঠা ছিল যা আমি সিএসএস ট্রিকস যেভাবে চেষ্টা করেছিলাম তা সঠিকভাবে কেন্দ্রে পৌঁছাতে পারিনি তাই আমি একটি জিকুয়েরি ফাইল কল সেন্টার পৃষ্ঠা লিখেছিলাম:

ব্রাউজারের জুম স্তর নিয়ে সমস্যা দেখা দিয়েছে, আপনি যদি 100%, 125%, 150% ইত্যাদি হন তবে পৃষ্ঠাটি পরিবর্তিত হবে would

নীচের কোডটি সেন্ট্রালপেজ.জেএসস নামে একটি জিকুয়েরি ফাইলে রয়েছে।

এটির কাজটি পেতে আমার পৃষ্ঠা থেকে আমার জিকুয়ারি এবং এই ফাইলটিতে লিঙ্ক করতে হয়েছিল, যদিও আমার মাস্টার পৃষ্ঠায় ইতিমধ্যে জিকুয়েরিতে একটি লিঙ্ক ছিল।

<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

এই প্রশ্নটি আগের যুগের মতো পোস্ট করা হয়েছিল, কিন্তু আজ যখন আমি একই উত্তরটি "কীভাবে জুম ইন এবং ইভেন্টটি সনাক্ত করব" এর সন্ধান করছিলাম, তখন আমি এমন একটি উত্তর খুঁজে পাইনি যা সমস্ত ব্রাউজারগুলিতে ফিট করে।

এখন যেমন রয়েছে: ফায়ারফক্স / ক্রোম / আইই 8 এবং আই 9 এর জন্য, জুম ইন এবং আউট একটি উইন্ডো.স্রাইজ ইভেন্টটিকে আগুন দেয়। এটি ব্যবহার করে ক্যাপচার করা যেতে পারে:

$(window).resize(function() {
//YOUR CODE.
});
— ভূমি সিংহল
সূত্র
-1

বিশুদ্ধভাবে জাভাস্ক্রিপ্ট সহ ডিপিপিএক্স (জুম স্তর) সন্ধানের জন্য ফায়ারফক্স 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
দয়া করে আপনার কোড কীভাবে কাজ করে তাও ব্যাখ্যা করুন। কোনও সহায়ক যদি আপনার উত্তরটি খুঁজে পান তবে তা সহায়ক হবে।
— নাম
আমি একটি ফিজল তৈরি করেছি: jsfiddle.net/Terite/5n1bk9do @AlexeySh হিসাবে। উল্লিখিত, এটি ক্রোম (56), ফায়ারফক্স (52) এ রেটিনা ডিসপ্লেতে প্রত্যাশার মতো কাজ করে না। এটি সাফারি (10) এ 0 জুম দেখায়।
— টেরিট
-1

সমস্যাটি ব্যবহৃত মনিটরের ধরণের মধ্যে রয়েছে, একটি 4k মনিটর বনাম স্ট্যান্ডার্ড মনিটর। জুম স্তরটি কী কী তা ব্যবহার করে তা আমাদের জানাতে সক্ষম হয়ে ক্রোম এখন পর্যন্ত বুদ্ধিমানwindow.devicePixelRatio , স্পষ্টতই এটি পিক্সেলের ঘনত্বটি কী তা বলতে পারে এবং একই সংখ্যাটি কী তা বিবেচনা করে তা রিপোর্ট করে।

অন্যান্য ব্রাউজারগুলি, এত বেশি নয়। আইই এবং এজ সম্ভবত সবচেয়ে খারাপ, কারণ তারা জুমের স্তরগুলি অনেক আলাদাভাবে পরিচালনা করে। 4k মনিটরে একই আকারের পাঠ্য পেতে, আপনাকে একটি স্ট্যান্ডার্ড মনিটরে 100% পরিবর্তে 200% নির্বাচন করতে হবে।

মে 2018 পর্যন্ত, আমি বেশ কয়েকটি জনপ্রিয় ব্রাউজার, ক্রোম, ফায়ারফক্স এবং আই 1111 এর জন্য জুম স্তরগুলি সনাক্ত করতে হবে। জুম শতাংশ কী তা আমাকে জানাতে হবে। IE এর জন্য, এটি 4k মনিটরের জন্য 100% প্রতিবেদন করে যা আসলে 200% এ থাকে তবে পাঠ্যের আকারটি একই রকম।

এখানে একটি বেহালতা: https://jsfiddle.net/ae1hdogr/

যদি কেউ অন্য ব্রাউজারগুলিতে ছুরিকাঘাত করতে এবং ফিডলটি আপডেট করতে যত্নবান হন তবে দয়া করে এটি করুন। লোকেরা আমার ওয়েব অ্যাপ্লিকেশনটি ব্যবহার করতে 100% এর চেয়ে বেশি একটি জুম ফ্যাক্টর ব্যবহার করছে এবং কোনও জোর জুম ফ্যাক্টরের পরামর্শ দেওয়ার জন্য একটি নোটিশ প্রদর্শন করছে কিনা তা সনাক্ত করতে আমার প্রধান লক্ষ্যটি ছিল এই 3 টি ব্রাউজারটি coveredেকে রাখা।

— Bill_VA
সূত্র
ম্যাক বুক প্রো-তে সাফারি (রেটিনা স্ক্রিন) 0, ক্রম নন রেটিনা স্ক্রিনে সঠিকভাবে ফিরে আসে 100, 90 ইত্যাদি
— ওজজিআইই
ক্রোম এবং ফায়ারফক্সের রেটিনা স্ক্রিনে 200
— ফিরিয়ে
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.