كيفية اكتشاف مستوى تكبير الصفحة في جميع المتصفحات الحديثة؟

https://stackoverflow.com/questions/1713771

19-09-2019
|

سؤال

كيف يمكنني اكتشاف مستوى تكبير الصفحة في جميع المتصفحات الحديثة؟ في حين أن هذا مسلك يروي كيفية القيام بذلك في IE7 و IE8، لا يمكنني العثور على حل متصفح جيد.
يخزن Firefox مستوى تكبير الصفحة للوصول إلى المستقبل. على تحميل الصفحة الأولى، هل سأتمكن من الحصول على مستوى التكبير؟ في مكان ما قرأته أنه يعمل عند حدوث تغيير التكبير بعد يتم تحميل الصفحة.
هل هناك طريقة لفخ 'zoom' حدث؟

أحتاج إلى هذا لأن بعض حساباتي مقرها بكسل وقد تتقلب عند التكبير.

عينة معدلة تعطى بواسطة LFL

تنبيه هذه الصفحة قيم الارتفاع المختلفة عند التكبير. 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>

المحلول

الآن فهي فوضى أكبر مما كان عليه عندما طلب هذا السؤال لأول مرة. من قراءة جميع الردود ووظائف المدونة التي يمكنني العثور عليها، إليك ملخص. أنا أيضا أنشأت هذه الصفحة لاختبار كل طرق قياس مستوى التكبير.

يحرر (2011-12-12): لقد أضفت مشروعا يمكن استنساخه: https://github.com/tombigel/dect-zoom.

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 +.: استعلامات الوسائط Binary Search (انظر أدناه)
Webkit.: https://www.chromestatus.com/feature/5737866978131968. (بفضل تيو في التعليقات)
Webkit.: قياس الحجم المفضل للفعل مع -webkit-text-size-adjust:none.
Webkit.: (كسر منذ R72591.) document.width / jQuery(document).width() (شكرا ل ديرك فان oosterbosch أعلاه). للحصول على نسبة من حيث بكسل الجهاز (بدلا من النسبي إلى التكبير الافتراضي)، اضرب window.devicePixelRatio.
Webkit القديم؟ (غير مؤلم): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth (من هذه الإجابة)
أوبرا: document.documentElement.offsetWidth / عرض position:fixed; width:100% ديف. من هنا (عرض الجدول QuirksMode يقول إنه خطأ؛ يجب أن يكون innerwidth CSS PX). نحن نستخدم الموقف: عنصر ثابت للحصول على عرض Viewport بما في ذلك الفضاء حيث أشرطة التمرير; ؛ document.documentelement.clientwidth يستثني هذا العرض. يتم كسر هذا منذ وقت ما في عام 2011؛ لا أعرف أي طريقة للحصول على مستوى التكبير في الأوبرا بعد الآن.
آخر: حل فلاش من سيباستيان
غير موثوق بها: استمع إلى أحداث الماوس وقياس التغيير في ScreenX / تغيير في Clientx

فيما يلي بحث ثنائي عن Firefox 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>

نصائح أخرى

يمكنك المحاولة

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

هذا سوف يوفر لك مستوى تكبير التكبير المتصفح.

للقبض على الحدث التكبير يمكنك استخدامه

$(window).resize(function() { 
// your code 
});

بالنسبة لي، لكروم / webkit، document.width / jQuery(document).width() لم تعمل. عندما صنعت نافذتي صغيرة وصغار في موقعي بحيث ظهرت أفقي أفقي، document.width / jQuery(document).width() لم تساوي 1 في التكبير الافتراضي. هذا بسبب document.width يتضمن جزء من المستند خارج Viewport.

استخدام window.innerWidth و window.outerWidth عمل. لسبب ما في الكروم، يتم قياس Outterwidth في بكسل الشاشة ويتم قياس Innerwidth في بكسل CSS.

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

زميلتي في العمل وأنا استخدم البرنامج النصي من https://github.com/tombigel/dect-zoom.. وبعد بالإضافة إلى ذلك، نقوم أيضا بإنشاء عنصر SVG وتحقق من خاصية Currentscale الخاصة به. إنه يعمل بشكل رائع على الكروم والمحتمل معظم المتصفحات أيضا. على FF يجب إيقاف تشغيل ميزة "تكبير النص" فقط ". SVG هو أيد على معظم المتصفحات. في وقت كتابة هذا الكتابة، تم اختباره على 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);

لقد وجدت هذه المقالة مفيدة للغاية. ضخمة بفضل يونان. كنت أرغب في تمرير بعض التعلم الإضافي الذي وجدته أثناء تنفيذ بعض التقنيات التي قدمها. في FF6 و Chrome 9، تمت إضافة دعم لاستفسارات الوسائط من JS، والذي يمكن أن يبسط بشكل كبير نهج استعلام الوسائط اللازم لتحديد التكبير في FF. انظر المستندات في MDN هنا. وبعد لأغراضي، أحتاج فقط إلى اكتشاف ما إذا كان المتصفح قد تم تكبيره أو خارجه، لم يكن لدي أي حاجة لعامل التكبير الفعلي. كنت قادرا على الحصول على إجابتي بسطر واحد من جافا سكريبت:

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

الجمع بين هذا مع حلول IE8 + و WebKit، والتي كانت أيضا خطوط فردية، كنت قادرا على اكتشاف التكبير على الغالبية العظمى من المتصفحات التي تصل إلى تطبيقنا مع عدد قليل من خطوط التعليمات البرمجية فقط.

zoom = ( window.outerWidth - 10 ) / window.innerWidth

هذا كل ما تحتاجه.

لدي حل لهذا يناير 2016. تم اختباره في متصفحات Chrome و Firefox و MS Edge.

المبدأ كما يلي. جمع 2 نقاط mousevent التي تبعدت. يأتي كل حدث ماوس مع إحداثيات الشاشة والوثائق. قياس المسافة بين النقاط في كل من أنظمة الإحداثيات. على الرغم من وجود إزاحة ثابتة متغيرة بين أنظمة الإحداثيات بسبب أثاث المتصفح، فإن مسافه: بعد بين النقاط يجب أن تكون متطابقة إذا لم يتم تكبير الصفحة. سبب تحديد "البعيد بعيدا" (أضع هذا ك 12 بكسل) بحيث يتغير تغييرات التكبير الصغيرة (على سبيل المثال 90٪ أو 110٪).

مرجع:https:/developer.mozilla.org/en/docs/web/vents/mousemove.

خطوات:

إضافة مستمع نقل الماوس

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

التقاط 4 قياسات من أحداث الماوس:

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

قياس المسافة D_C بين النقاط 2 في نظام العميل
قياس المسافة D_S بين النقاط 2 في نظام الشاشة
إذا d_c! = D_S ثم يتم تطبيق التكبير. الفرق بين الاثنين يخبرك بمقدار التكبير.

NB فقط تفعل حسابات المسافة نادرا ما، على سبيل المثال عندما يمكنك تذوق حدث ماوس جديد بعيد عن السابق.

القيود: يفترض المستخدم سيحرك الماوس على الأقل قليلا، والتكبير غير معروف حتى هذه المرة.

في Internet Explorer 7، 8 و 9، هذا يعمل:

function getZoom() {
    var screen;

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

تتم إضافة "+0.9" لمنع أخطاء التقريب (خلاف ذلك، ستحصل على 104٪ و 109٪ عند تعيين تكبير المتصفح إلى 105٪ و 110٪ على التوالي).

في IE6 Zoom لا يوجد، لذلك من غير الضروري التحقق من التكبير.

ما توصلت إليه هو:

1) جعل position:fixed <div> مع width:100% (معرف = Zoomdiv.)

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>

ملاحظة: هذا هو أول مشاركتي، عفوا عن أي أخطاء

وقد عمل هذا رائعا بالنسبة لي في المتصفحات القائمة على WebKit (Chrome، Safari):

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;

في الأساس، لدينا:

window.devicePixelRatio الذي يأخذ في الاعتبار كلا من تكبير مستوى المتصفح * وكذلك تكبير النظام / كثافة البكسل.
* - على مستوى تكبير التشغيل Mac / Safari لا يؤخذ في الاعتبار
تساؤلات الإعلام
vw/vh وحدات CSS
resize الحدث، الذي يتم تشغيله عند تغيير مستوى التكبير، يسبب حجم فعال من تغييرات النافذة

يجب أن يكون ذلك كافيا عادي ux. إذا كنت بحاجة إلى اكتشاف مستوى التكبير قد يكون علامة على تصميم UI السيئ.

من الصعب تتبع تكبير الملعب ولا يعتبر حاليا.

على التليفون المحمول الأجهزة (مع Chrome لنظام Android أو Opera Mobile) يمكنك اكتشاف التكبير window.visualveport.scale.. https:/developer.mozilla.org/en-us/docs/web/api/visual_viewport_api.

الكشف عن سفاري: document.documentelement.clientwidth / window.innerwidth. (العودة 1 إذا لم يكن هناك تكبير على الجهاز).

لا تزال حساباتك تعتمد على عدد من البكسل CSS. إنها مجرد حجم مختلف على الشاشة الآن. هذه هي نقطة تكبير الصفحة الكاملة.

ما الذي تريد أن يحدث في متصفح على جهاز 192dpi وبالتالي عرض عادة أربعة بكسلات جهاز لكل بكسل في صورة؟ عند 50٪، يعرض هذا الجهاز الآن صورة واحدة بكسل في جهاز بكسل جهاز واحد.

على الكروم

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");

لم يختبر هذا ل IE، ولكن إذا قمت بإجراء عنصر elem مع

min-width: 100%

ومن بعد

window.document.width / elem.clientWidth

سوف تعطيك مستوى التكبير المتصفح الخاص بك (بما في ذلك document.body.style.zoom عامل).

هذا ل كروم, ، في أعقاب user800583. إجابه ...

قضيت بضع ساعات في هذه المشكلة ولم أجد نهجا أفضل، لكن:

هناك 16 'Zoomlevel' وليس 10
عندما تكون الكروم ملء الشاشة / تعظيم النسبة window.outerWidth/window.innerWidth, ، وعندما لا يكون، يبدو أن النسبة (window.outerWidth-16)/window.innerWidth, ومع ذلك يمكن التعامل مع الحالة الأولى من قبل المرء الثاني.

لذلك وصلت إلى ما يلي ...

ولكن هذا النهج لديه قيود: على سبيل المثال إذا كنت تلعب الأكورديون مع نافذة التطبيق (توسيع بسرعة وتقليل عرض النافذة)، فستحصل على فجوات بين مستويات التكبير على الرغم من أن التكبير لم يتغير (قد يكون Outterwidth و InnerWidth تحديث بالضبط في نفس الوقت).

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 ]
);

لدي هذا الحل ل المحمول فقط (اختبار مع 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());

});

إذا كنت تريد مستوى التكبير / التصغير مباشرة بعد خطوة القرصة، فمن المحتمل أن تضطر إلى ضبط مهلة صغيرة بسبب تأخير التقديم (ولكن لست متأكدا لأنني لم اختبره).

تعتمد هذه الإجابة على تعليقات حول DevicePixelratio مرة أخرى بشكل غير صحيح على إجابة User1080381.

لقد وجدت أن هذا الأمر كان يعود بشكل غير صحيح في بعض الحالات أيضا عند العمل مع سطح المكتب، Surface Pro 3، و Surface Pro 4.

ما وجدته هو أنه عمل على سطح المكتب الخاص بي، لكن SP3 و SP4 تعطي أرقاما مختلفة من بعضها البعض وسطح المكتب.

لقد لاحظت أن SP3 كان يعود إلى 1 ونصف مستوى التكبير كنت أتوقع. عندما ألقي نظرة على إعدادات العرض، تم تعيين SP3 بالفعل إلى 150٪ بدلا من 100٪ لدي على سطح المكتب الخاص بي.

لذلك، يجب أن يكون الحل للتعليقات هو تقسيم مستوى التكبير المرتجع عن طريق مقياس الجهاز الذي تقوم به حاليا.

كنت قادرا على الحصول على المقياس في إعدادات Windows عن طريق القيام بما يلي:

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

تتضاعف عن طريق الإجابة الأصلية 100 في user1080381 من شأنها أن تعطيك تكبير 100 (٪).

إذا كنت تعمل حاليا لا تزال بحاجة إلى فصل بواسطة المتصفح. تم اختباره بنجاح على 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()
    };
  }

هنا لا يتغير!:

<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)

قد يساعد هذا أو لا يساعد أي شخص، لكن كان لدي صفحة لم أستطع الوصول إليها بشكل صحيح بغض النظر عن الحيل CSS التي جربتها حتى كتبت صفحة مركز اتصال ملف 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);
    }
}

هذا هو السؤال تم نشره مثل الأعمار، ولكن اليوم عندما كنت أبحث عن نفس الإجابة "كيفية اكتشاف التكبير والخروج من الحدث"، لم أستطع العثور على إجابة واحدة من شأنها أن تناسب جميع المتصفحات.

كما في الوقت الحالي: بالنسبة ل Firefox / Chrome / IE8 و IE9، فإن التكبير داخل وخارج ينطلق نافذة. يمكن التقاط هذا باستخدام:

$(window).resize(function() {
//YOUR CODE.
});

الحل الباحث عن Firefox 16+ للعثور على DPPX (مستوى التكبير) بحت مع جافا سكريبت:

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

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

تكمن المشكلة في أنواع الشاشة المستخدمة، شاشة 4K مراقب VS قياسية. Chrome هو أذكى إلى حد بعيد في القدرة على إخبارنا بما هو مستوى التكبير باستخدام window.devicePixelRatio, على ما يبدو أنه يمكن أن يخبر ما هي كثافة بكسل والتقارير مرة أخرى نفس العدد على ما يهم ما.

متصفحات أخرى، وليس كثيرا. ربما IE و EDGE ربما الأسوأ، لأنها تتعامل مع مستويات التكبير بشكل مختلف. للحصول على النص نفس الحجم على شاشة 4K، يجب عليك تحديد 200٪، بدلا من 100٪ على شاشة قياسية.

اعتبارا من مايو 2018، إليك ما يجب علي اكتشاف مستويات التكبير للحصول على عدد قليل من المتصفحات الأكثر شعبية، كروم، فايرفوكس، و IE11. لقد أخبرني ما هي النسبة المئوية للتكبير. بالنسبة ل IE، فإنها تقارير 100٪ حتى بالنسبة لشاشات 4K هي بالفعل 200٪، ولكن حجم النص هو نفسه حقا.

إليك كمان: https://jsfiddle.net/ae1hdogr/

إذا كان أي شخص يهتم بإجراء طعنة في متصفحات أخرى وتحديث الكمان، فالرجاء القيام بذلك. كان هدفي الرئيسي هو الحصول على هذه المتصفحات الثلاثة المشمولة بالكشف عن ما إذا كان الناس يستخدمون عامل التكبير أكبر من 100٪ لاستخدام تطبيق الويب الخاص بي وعرض إشعار يشير إلى عامل تكبير مؤجر.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow