วิธีการตรวจสอบระดับการซูมหน้าในเบราว์เซอร์ที่ทันสมัยทั้งหมด?

310

  1. ฉันจะตรวจสอบระดับการซูมหน้าในเบราว์เซอร์ที่ทันสมัยทั้งหมดได้อย่างไร ขณะที่เธรดนี้บอกวิธีการทำใน IE7 และ IE8 ฉันไม่สามารถหาโซลูชันข้ามเบราว์เซอร์ที่ดีได้

  2. Firefox จัดเก็บระดับการซูมหน้าสำหรับการเข้าถึงในอนาคต ในการโหลดหน้าแรกฉันจะสามารถรับระดับการย่อ / ขยายได้หรือไม่ บางแห่งที่ฉันอ่านจะทำงานเมื่อมีการเปลี่ยนแปลงการซูมเกิดขึ้นหลังจากโหลดหน้าเว็บแล้ว

  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
โดยทั่วไปฉันต้องการทราบมิติของ DIV ที่ซูม 100%
— understack
4
โดยทั่วไปจะไม่มีวิธีการตรวจจับการซูมในปี 2562 : ฉันได้ทดสอบวิธีแก้ปัญหาด้านล่างทั้งหมดใน Chrome 78 บน Mac Catalina และไม่มีวิธีใดที่ทำงานได้
— collimarco

คำตอบ:

274

ตอนนี้มันยุ่งเหยิงยิ่งกว่าเดิมเมื่อถามคำถามนี้เป็นครั้งแรก จากการอ่านคำตอบทั้งหมดและโพสต์บล็อกที่ฉันหาได้นี่เป็นบทสรุป ฉันยังตั้งค่าหน้านี้เพื่อทดสอบวิธีการเหล่านี้ทั้งหมดในการวัดระดับการซูม

แก้ไข (2011-12-12): ฉันได้เพิ่มโครงการที่สามารถโคลนได้: https://github.com/tombigel/detect-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 + : สื่อการสืบค้นแบบไบนารีค้นหา (ดูด้านล่าง)
  • WebKit : https://www.chromestatus.com/feature/5737866978131968 (ขอบคุณ Teo ในความคิดเห็น)
  • WebKit : วัดขนาดที่ต้องการของ div -webkit-text-size-adjust:noneกับ
  • WebKit : (เสียตั้งแต่r72591 ) document.width / jQuery(document).width()(ต้องขอบคุณDirk van Oosterbosch ด้านบน ) หากต้องการรับอัตราส่วนเป็นพิกเซลอุปกรณ์ (แทนที่จะสัมพันธ์กับการซูมเริ่มต้น) ให้คูณด้วยwindow.devicePixelRatioคูณด้วย
  • WebKit เก่าหรือไม่ (ไม่ได้ตรวจสอบ): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth(จากคำตอบนี้ )
  • Opera : document.documentElement.offsetWidth/ ความกว้างของposition:fixed; width:100%div จากที่นี่ ( ตารางความกว้างของ Quirksmodeบอกว่ามันเป็นบั๊ก InnerWidth ควรเป็น CSS px) เราใช้ตำแหน่ง: องค์ประกอบคงที่เพื่อให้ได้ความกว้างของวิวพอร์ตรวมถึงพื้นที่ที่แถบเลื่อนอยู่ ; document.documentElement.clientWidth ไม่รวมความกว้างนี้ สิ่งนี้หักตั้งแต่ในปี 2554 ฉันไม่รู้วิธีที่จะเพิ่มระดับการซูมใน Opera อีกต่อไป
  • อื่น ๆ : โซลูชันแฟลชจากเซบาสเตียน
  • ไม่น่าเชื่อถือ: ฟังเหตุการณ์เมาส์และวัดการเปลี่ยนแปลงใน 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>
— 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 เมื่อครั้งแรกที่ผมเขียนนี้สำหรับ Firefox 4, Firefox matchMediaไม่ได้มี พอลไอริชยังเขียนpolyfill matchMedia ที่คล้ายกันที่เป็นส่วนหนึ่งของModernizr
— yonran
7
ข่าวดีทุกคน! พวกเขาทำได้ดีที่สุด! Vieport API! chromestatus.com/feature/5737866978131968 ฉันทดสอบแล้วมันเยี่ยมมาก!
— Teo
3
Viewport API ใช้งานได้กับการซูมด้วยนิ้วเท่านั้น ถ้าคุณซูมบนเดสก์ท็อปมันบอกว่าสเกลคือ 1 @Jason T Featheringham มีเหตุผลอื่นนอกเหนือจาก "การเลือกปฏิบัติ" เพื่อต้องการทราบระดับการซูม การย่อ / ขยายถูกตั้งค่าไว้ทั่วทุกหน้าสำหรับโดเมน แต่คุณอาจต้องการจัดการมันในหน้าเกมหรือป๊อปอัพส่วนขยายมากกว่าที่คุณทำในหน้าช่วยเหลือ
— Pudica
61

คุณสามารถลอง

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

นี่จะให้ระดับเปอร์เซ็นต์การซูมของเบราว์เซอร์บนจอแสดงผลที่ไม่ใช่เรตินา สำหรับการแสดง DPI / เรตินาสูงจะทำให้ได้ค่าที่แตกต่าง (เช่น 200 สำหรับ Chrome และ Safari, 140 สำหรับ Firefox)

เพื่อจับภาพเหตุการณ์การซูมที่คุณสามารถใช้ได้

$(window).resize(function() { 
// your code 
});
— user1080381
แหล่งที่มา
1
ทำงานได้อย่างสมบูรณ์แบบบนอุปกรณ์พกพา devicePixelRatioนอกจากนี้ยังเป็นที่น่าสนใจมากทีเดียวที่จะเห็นสิ่งที่โทรศัพท์มือถือที่มีสิ่งที่ สิ่งนี้ยังช่วยฉันอย่างมากในการสลับfixedองค์ประกอบไปยังองค์ประกอบabsoluteตำแหน่งเมื่อเหตุการณ์การซูมเกิดขึ้นหรือเมื่อค่าเริ่มต้นของdevicePixelRatioการเปลี่ยนแปลงเปลี่ยนแปลง ที่สมบูรณ์แบบ! ขอบคุณ!!
— lowtechsun
12
ใช้งานไม่ได้ตามที่คาดไว้: คืนค่า 200 ใน Chrome บน MacBook ด้วยเรตินาเมื่อเบราว์เซอร์ไม่ซูม
— Terite
19
เบราว์เซอร์ที่รองรับหน้าจอ DPI สูงจะไม่ให้ผลลัพธ์ที่คาดหวังเมื่อใช้การแสดงผลดังกล่าวและ Safari จะไม่คำนึงถึงการแสดงผล
— Fredrik C
สำหรับทุกคนที่ใส่ใจใน IE นี่ใช้งานได้กับ IE11 เท่านั้น (มันจะคืน NaN บน IE10 หรือต่ำกว่า)
— 14902
3
Math.round(window.devicePixelRatio * 100)ใช้งานได้กับ Chrome, IE, Edge และ Firefox Safari บน iMac จะคืนค่า 200 เสมอ
— Super Jade
45

สำหรับฉันสำหรับ Chrome / Webkit document.width / jQuery(document).width()ไม่ทำงาน เมื่อฉันทำให้หน้าต่างเล็กและซูมเข้าไปในเว็บไซต์ของฉันจนปรากฏแถบเลื่อนแนวนอนdocument.width / jQuery(document).width()ไม่เท่ากับ 1 ที่ซูมเริ่มต้น เนื่องจากdocument.widthมีส่วนของเอกสารที่อยู่นอกวิวพอร์ต

ใช้window.innerWidthและwindow.outerWidthทำงาน ด้วยเหตุผลบางอย่างใน Chrome, outerWidth จะถูกวัดเป็นพิกเซลหน้าจอและ 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";
}
— user800583
แหล่งที่มา
1
ดีมาก. และถ้าคุณจำเป็นต้องรู้ว่ามันซูมหรือไม่ใน Chrome:isZoomed = (screenCssPixelRatio < .98 || screenCssPixelRatio > 1.02)
— Brent Faust
1
window.outerWidth ก็เปลี่ยนไปด้วยการซูมด้วย นอกจากนี้ในทุกระบบปฏิบัติการความกว้างของขอบหน้าต่างคือ 8 พิกเซล (แม้ในระบบปฏิบัติการเดียวกันการออกแบบอาจแตกต่างกัน) อย่างไรก็ตามฉันขอแนะนำให้ย่อท้าย 16 ไม่ใช่ 8 เนื่องจากคุณมีขอบหน้าต่างสองครั้ง นอกจากนี้เบราว์เซอร์บางตัวยังมีเส้นขอบบนหน้าต่างการแสดงผลจริง (เช่น FF) และบางอันไม่ใช่ (Safari) - แต่ถึงแม้จะขึ้นอยู่กับระบบปฏิบัติการที่คุณใช้เบราว์เซอร์ (เช่น Safari มีขอบบน Windows) การสำรองข้อมูล InnerWidth เริ่มต้น (เช่นเมื่อโหลดหน้าเว็บ) และใช้เพื่อเปรียบเทียบทำงานได้ดีขึ้น แต่เฉพาะเมื่อการซูมแบบไม่เต็ม 100% ...
— StanE
1
ผลลัพธ์ 0 ไม่ว่าจะเกิดอะไรขึ้นกับฉัน (2017, feb)
— Tiberiu-Ionuț Stan
1
switchคำสั่งอาจจะดีกว่ามากถ้างบอื่น
— Edric
ไม่ทำงาน: เพิ่งทดสอบกับ Chrome บน Mac และจะให้ผลตอบแทนเท่าเดิมโดยไม่คำนึงถึงระดับการซูม
— collimarco
16

เพื่อนร่วมงานของฉันและฉันใช้สคริปต์จากhttps://github.com/tombigel/detect-zoom นอกจากนี้เรายังสร้างองค์ประกอบ svg แบบไดนามิกและตรวจสอบคุณสมบัติปัจจุบันของสเกล มันใช้งานได้ดีบน Chrome และเบราว์เซอร์ส่วนใหญ่ก็เช่นกัน สำหรับ 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);
— คนโง่
แหล่งที่มา
วิธีการนี้ในขณะนี้มักจะรายงาน svg.currentScale = 1 ใน Firefox 29 อาจเป็นเพราะพวกเขาปรับขนาดตัวเลขที่หน้าจอทั้งหมดขึ้นอยู่กับการซูมซึ่งเป็นข้อผิดพลาด ดูเหมือนว่า IE11 จะมีปัญหาเหมือนกันบนเดสก์ท็อปโดยปรับความสูงของหน้าจอเป็นอุปกรณ์ viewportPixelRatio ซึ่งค่อนข้างเมา
— hexalys
11

ฉันพบบทความนี้มีประโยชน์มหาศาล ขอบคุณมากสำหรับ yonran ฉันต้องการส่งต่อการเรียนรู้เพิ่มเติมบางอย่างที่ฉันพบขณะใช้งานเทคนิคบางอย่างที่เขามีให้ ใน FF6 และ Chrome 9 เพิ่มการรองรับการสืบค้นสื่อจาก JS ซึ่งสามารถลดความซับซ้อนของวิธีการสืบค้นสื่อที่จำเป็นสำหรับการพิจารณาการซูมเข้า FF ดูเอกสารที่ MDN ที่นี่ เพื่อจุดประสงค์ของฉันฉันเพียงต้องการตรวจสอบว่าเบราว์เซอร์ถูกย่อหรือขยายฉันไม่จำเป็นต้องใช้ตัวคูณการซูมจริง ฉันสามารถรับคำตอบด้วย JavaScript หนึ่งบรรทัด:

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

เมื่อรวมเข้ากับโซลูชั่น IE8 + และ Webkit ซึ่งเป็นบรรทัดเดียวฉันสามารถตรวจจับการซูมบนเบราว์เซอร์ส่วนใหญ่ที่กระทบแอปของเราด้วยรหัสเพียงไม่กี่บรรทัด

— brianh
แหล่งที่มา
4
คุณช่วยระบุรหัสวิธีการตรวจสอบการซูมจริงโดยใช้การสืบค้นสื่อได้ไหม
— เทนเนสซี
ลองใช้เพียง "(ความกว้าง: <X> px) และ (ความสูง: <Y> px)" โดยที่ <X> และ <Y> คือ window.innerWidth และ window.innerHeight ตามลำดับ มันใช้งานได้แม้กับการซูมในปริมาณเล็กน้อย ทำงานได้ใน Safari ด้วย
— สูงสุด
@max คุณสามารถให้รหัส JSFIddle หรือตัวอย่างของลักษณะที่รวมกันได้ไหม?
— lowtechsun
รายงานเกี่ยวกับอุปกรณ์เรตินาเช่น macbook pro เสมอ
— Matthew Sanders
codepen.io/anon/pen/LgrGjJแสดงการค้นหาแบบไบนารีที่มีการสืบค้นสื่อ แต่นี่ก็เหมือนกับการสืบค้นdevicePixelRatio: มันจะพิจารณาการปรับขนาดการแสดงบัญชี
— ZachB
11 
zoom = ( window.outerWidth - 10 ) / window.innerWidth

นั่นคือทั้งหมดที่คุณต้องการ

— อเล็กซ์ฟอน ธ อร์น
แหล่งที่มา
ลบทำไม10จากouterWidth?
— callum
น่าจะเป็นแถบเลื่อน แถบเลื่อนแต่ละแถบนั้นมีความแตกต่างกันเช่นใน iOS ซึ่งมีขนาดเล็กกว่ามาก บวกกับวิธีการแก้ปัญหานี้ดูเหมือนว่าจะเป็นโครเมี่ยมเท่านั้น
— Sarah
1
มันไม่ทำงานหากผู้ใช้มีแถบด้านข้างเช่นที่คั่นหน้าใน FF
— Gerrit Sedlaczek
7

ฉันมีทางออกสำหรับสิ่งนี้ในเดือนมกราคม 2559 ผ่านการทดสอบการทำงานในเบราว์เซอร์ Chrome, Firefox และ MS Edge

โดยมีหลักการดังนี้ รวบรวมคะแนน MouseEvent 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. วัดระยะ d_c ระหว่าง 2 จุดในระบบไคลเอ็นต์

  4. วัดระยะทาง d_s ระหว่าง 2 จุดในระบบหน้าจอ

  5. หาก d_c! = d_s จะใช้การซูม ความแตกต่างระหว่างทั้งสองจะบอกปริมาณการซูม

NB ทำการคำนวณระยะทางเพียงเล็กน้อยเช่นเมื่อคุณสามารถสุ่มตัวอย่างเหตุการณ์เมาส์ใหม่ที่อยู่ไกลจากเหตุการณ์ก่อนหน้านี้

ข้อ จำกัด : สมมติว่าผู้ใช้เลื่อนเมาส์อย่างน้อยและซูมไม่สามารถรู้ได้จนกว่าจะถึงเวลานี้

— user1191311
แหล่งที่มา
1
ฉันสร้างซอ: jsfiddle.net/Terite/9b6ko854ด้วย "ห่างกัน" ซึ่งหมายถึง 100 พิกเซล น่าเสียดายที่มันใช้งานไม่ได้กับ Firefox (52) บน MacBook พร้อมจอแสดงผลเรตินา นอกจากนี้ควรสังเกตว่ามีการตรวจพบการซูมของอินเทอร์เฟซ Window 7 125% ใน Chrome, Firefox และ IE11 (ในการซูม 125% ซึ่งเป็นค่าเริ่มต้นแล้ว) เป็นเบราว์เซอร์ซูม
— Terite
ซอของคุณใช้ได้กับฉันผ่านการทดสอบใน Linux กับ Firefox และ Chrome :)
— user1191311
จอแสดงผล Retina ช่วยเพิ่มระดับความยากอีกระดับเนื่องจากรายงานขนาดพิกเซลไม่ถูกต้องรวมถึงสิ่งอื่น ๆ
— user1191311
5

คุณสามารถใช้Visual Viewport API :

window.visualViewport.scale;

มันเป็นมาตรฐานและใช้งานได้ทั้งบนเดสก์ทอปและโทรศัพท์มือถือ: สนับสนุนเบราว์เซอร์

— collimarco
แหล่งที่มา
ดูมีประโยชน์ แต่ก็ยังคงถูกปิดใช้งานโดยค่าเริ่มต้นในเดสก์ท็อป Firefox และไม่ทำงานใน Internet Explorer ตั้งแต่วันที่ 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" เพื่อป้องกันข้อผิดพลาดในการปัดเศษ (มิฉะนั้นคุณจะได้รับ 104% และ 109% เมื่อซูมเบราว์เซอร์ถูกตั้งค่าเป็น 105% และ 110% ตามลำดับ)

ใน IE6 zoom ไม่มีอยู่ดังนั้นไม่จำเป็นต้องตรวจสอบการซูม

— Pench
แหล่งที่มา
1
น่าสนใจ สำหรับฉันมันจะแสดง 80% ของการซูมเสมอ ... ฉันเชื่อว่านี่เป็นเพราะฉันมีการตั้งค่าแบบอักษรขนาดใหญ่ที่ระดับ Windows 7 (ค้นหา "ขนาดตัวอักษร" ในแผงควบคุม) ดีกว่าโซลูชัน IE8 ในคำตอบของ @ yonran ที่ไม่ได้ผลเลยสำหรับฉัน jsbin.com/obowof
— ripper234
ฉันได้รับ 101% เมื่อตั้งค่าการซูมเป็น 100%
— Allen Wallace
ฉันด้วย. ใช้ 0.4999 แทน 0.9
— Yan Bellavance
ieZoomLevel = ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.4999) .toFixed ();
— Yan bellavance
3

สิ่งที่ฉันคิดไว้คือ:

1) สร้างposition:fixed <div>ด้วยwidth:100%( id = 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>

PS: นี่เป็นโพสต์แรกของฉันให้อภัยข้อผิดพลาดใด ๆ

— Abhishek Borar
แหล่งที่มา
3
ขออภัยนี่จะใช้งานได้เฉพาะเมื่อผู้ใช้มีเบราว์เซอร์ที่ขยายใหญ่ที่สุด ( screen.availWidthรายงานความกว้างของหน้าจอเป็นพิกเซลของหน้าจอไม่ใช่หน้าต่างเบราว์เซอร์)
— Bailey Parker
3

สิ่งนี้ได้ผลดีสำหรับฉันในเบราว์เซอร์ที่ใช้ 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;
}

ดูเหมือนว่าจะไม่ทำงานใน Firefox

วิธีนี้ใช้ได้ใน WebKit:

var zoomLevel = document.width / document.body.clientWidth;
— rudolfrck
แหล่งที่มา
5
document.widthผลตอบแทนที่ไม่ได้กำหนด
— Adam
คืนค่าจริงเสมอไม่ว่าจะแสดงการซูม (2017, feb, retina)
— Tiberiu-Ionuț Stan
3

โดยทั่วไปเรามี:

  • window.devicePixelRatioซึ่งคำนึงถึงทั้งการซูมระดับเบราว์เซอร์ * รวมถึงความหนาแน่นของระบบซูม / พิกเซล
    * - สำหรับระดับการซูม Mac / Safari จะไม่นำมาพิจารณา
  • คำสั่งสื่อ
  • vw/ vhหน่วย CSS
  • resize เหตุการณ์ที่เกิดขึ้นเมื่อมีการเปลี่ยนแปลงระดับการซูมทำให้ขนาดของหน้าต่างเปลี่ยนไปอย่างมีประสิทธิภาพ

นั่นควรจะเพียงพอสำหรับUX ปกติ หากคุณต้องการตรวจจับระดับการซูมที่อาจเป็นสัญญาณของการออกแบบ UI ที่ไม่ดี

Pitch-zoom นั้นยากต่อการติดตามและไม่ได้รับการพิจารณาในปัจจุบัน

— kirilloid
แหล่งที่มา
1
window.devicePixelRatio เป็นคำตอบที่ดีที่ทำงานในเบราว์เซอร์รุ่นใหญ่ - Chrome, Safari, FF, Edge, IE
— DShultz
คุณได้พบ @kirilloid อะไรที่สามารถใช้ในการค้นหา "ระดับการซูม" ที่น่าเชื่อถือใน Safari หรือไม่?
— onassar
2

บนโทรศัพท์มือถืออุปกรณ์ (กับ Chrome สำหรับ Android หรือ Opera Mobile) คุณสามารถตรวจสอบการซูมโดยwindow.visualViewport.scale https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

ตรวจจับบน Safari: document.documentElement.clientWidth / window.innerWidth (ส่งคืน 1 หากไม่มีการซูมบนอุปกรณ์)

— จิม
แหล่งที่มา
1

การคำนวณของคุณยังคงขึ้นอยู่กับจำนวนพิกเซล CSS ตอนนี้มันมีขนาดต่างกันบนหน้าจอ นั่นคือจุดของการซูมแบบเต็มหน้า

คุณต้องการเกิดอะไรขึ้นบนเบราว์เซอร์บนอุปกรณ์ 192dpi ซึ่งปกติแล้วจะแสดงสี่พิกเซลอุปกรณ์สำหรับแต่ละพิกเซลในภาพ เมื่อซูม 50% อุปกรณ์นี้จะแสดงภาพพิกเซลเดียวในพิกเซลอุปกรณ์หนึ่งพิกเซล

— นีล
แหล่งที่มา
@Neil: ฉันจะได้มิติ 'CSS pixels' ได้อย่างไร
— understack
CSS เริ่มต้นที่จุด แต่แน่นอนคุณสามารถระบุพิกเซลได้โดยใช้ตัวปรับขนาด px สำหรับคุณสมบัติขององค์ประกอบที่ดึงมาใน JavaScript สิ่งเหล่านี้ควรเป็นพิกเซล CSS อยู่แล้ว ดังนั้นหากคุณระบุความกว้างของ <div> เป็น 100px นั่นคือสิ่งที่คุณจะได้รับจาก JavaScript ไม่ว่าระดับการซูมจะเป็นเท่าใดก็ตาม
— Neil
1

บน Chrome

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");
— Nicolas Giszpenc
แหล่งที่มา
1
ใช้งานได้เฉพาะเมื่อหน้าต่างเบราว์เซอร์มีความกว้างเต็มหน้าจอ
— tenbits
0

ไม่ได้ทดสอบสิ่งนี้สำหรับ IE แต่ถ้าคุณสร้างองค์ประกอบelemด้วย

min-width: 100%

แล้วก็ 

window.document.width / elem.clientWidth

จะให้ระดับการซูมของเบราว์เซอร์ของคุณ (รวมถึงdocument.body.style.zoomปัจจัย)

— เดิร์คแวนออสเตอร์บอส
แหล่งที่มา
ทดสอบแล้ว แต่การซูมเข้าดูเหมือนจะไม่เพิ่ม elem.clientWidth
— Tom
0

นี่สำหรับChromeเมื่อผู้ใช้ตอบ8008008 ...

ฉันใช้เวลาสองสามชั่วโมงกับปัญหานี้และไม่พบวิธีที่ดีกว่า แต่:

  • มี 16 'zoomLevel' และไม่ใช่ 10
  • เมื่อ Chrome เต็มหน้าจอ / ขยายอัตราส่วนให้ใหญ่ที่สุด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

คำตอบนี้ขึ้นอยู่กับความคิดเห็นเกี่ยวกับ 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 (%)

— Cameron Weaver
แหล่งที่มา
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 (อย่างน้อยกับ firefox และ ie8)

@tfl: เป็นเพราะคุณได้แก้ไขความกว้างในแบบอินไลน์ ฉันได้แก้ไขตัวอย่างของคุณเพื่อแสดงเคสของฉัน (โพสต์ภายในคำถามเดิม)
— understack
-1

สิ่งนี้อาจหรือไม่อาจช่วยใครก็ได้ แต่ฉันมีหน้าฉันไม่สามารถไปที่ศูนย์ได้อย่างถูกต้องไม่ว่าจะใช้เทคนิค Css ใดฉันก็ลองเขียน JQuery file call Page Page:

ปัญหาเกิดขึ้นกับระดับการซูมของเบราว์เซอร์หน้าจะเลื่อนตามหากคุณเป็น 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

นี่เป็นคำถามที่ถูกโพสต์เมื่อหลายปีก่อน แต่วันนี้เมื่อฉันกำลังมองหาคำตอบเดียวกัน "วิธีตรวจจับการซูมเข้าและออกเหตุการณ์" ฉันไม่พบคำตอบเดียวที่เหมาะกับเบราว์เซอร์ทั้งหมด

ณ ตอนนี้: สำหรับ Firefox / Chrome / IE8 และ IE9 การซูมเข้าและออกทำให้เกิดเหตุการณ์ window.resize สิ่งนี้สามารถบันทึกได้โดยใช้:

$(window).resize(function() {
//YOUR CODE.
});
— ภุมิสิงห์
แหล่งที่มา
-1

วิธีแก้ปัญหาสำหรับ FireFox 16+ เพื่อค้นหา DPPX (ระดับการซูม) ด้วย JavaScript อย่างแท้จริง:

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
แหล่งที่มา
มันไม่ทำงานตามที่คาดไว้ใน Firefox (52) บน MacBook พร้อมจอแสดงผลเรตินา - ส่งคืน 2 เมื่อไม่ได้ซูม ฉันสร้างซอ: jsfiddle.net/Terite/wadkh3ea
— Terite
-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;
};
— ali
แหล่งที่มา
6
โปรดอธิบายว่ารหัสของคุณทำงานอย่างไร มันจะเป็นประโยชน์หากมือใหม่บางคนพบคำตอบของคุณ
— displayName
ฉันสร้างซอ: jsfiddle.net/Terite/5n1bk9doเป็น @AlexeySh กล่าวถึงว่าใช้งานไม่ได้ตามที่คาดไว้บนจอเรตินาใน Chrome (56), Firefox (52) นอกจากนี้ยังแสดงให้เห็นถึง 0 ในการซูมบน Safari (10)
— Terite
-1

ปัญหาอยู่ในประเภทของจอภาพที่ใช้จอภาพ 4k กับจอภาพมาตรฐาน Chrome นั้นฉลาดที่สุดในการบอกเราว่าระดับการซูมนั้นใช้งานเพียงใดโดยwindow.devicePixelRatioชัดแจ้งว่าChrome สามารถบอกได้ว่าความหนาแน่นของพิกเซลคืออะไรและรายงานกลับจำนวนเท่าเดิม

เบราว์เซอร์อื่น ๆ ไม่มาก IE และ Edge อาจเป็นสิ่งที่แย่ที่สุดเนื่องจากพวกเขาจัดการกับระดับการซูมที่แตกต่างกันมาก ในการรับข้อความขนาดเท่ากันบนจอภาพ 4k คุณต้องเลือก 200% แทน 100% บนจอภาพมาตรฐาน

ตั้งแต่เดือนพฤษภาคม 2018 ต่อไปนี้เป็นสิ่งที่ฉันต้องตรวจจับระดับการซูมสำหรับเบราว์เซอร์ที่ได้รับความนิยมมากที่สุดอย่าง Chrome, Firefox และ IE11 ฉันบอกให้ฉันรู้ว่าเปอร์เซ็นต์การซูมคืออะไร สำหรับ IE นั้นจะรายงาน 100% แม้กระทั่งสำหรับมอนิเตอร์ 4k ที่จริงแล้วจะอยู่ที่ 200% แต่ขนาดตัวอักษรเหมือนกันจริงๆ

นี่คือซอ: https://jsfiddle.net/ae1hdogr/

หากใครก็ตามที่สนใจที่จะแทงที่เบราว์เซอร์อื่นและอัพเดทซอโปรดทำเช่นนั้น เป้าหมายหลักของฉันคือให้เบราว์เซอร์ทั้ง 3 ตัวนี้ครอบคลุมเพื่อตรวจสอบว่าผู้คนใช้ตัวย่อ / ขยายมากกว่า 100% เพื่อใช้เว็บแอปพลิเคชันของฉันและแสดงประกาศแจ้งให้ทราบถึงปัจจัยการย่อ / ขยาย

— Bill_VA
แหล่งที่มา
Safari บน Mac Book Pro (หน้าจอเรตินา) ส่งคืนค่า 0, Chrome บนหน้าจอที่ไม่ใช่เรตินาส่งคืนอย่างถูกต้องดูเหมือนว่า 100, 90 และอื่น ๆ
— OZZIE
ส่งคืน 200 บนหน้าจอเรตินาของ Chrome & Firefox
— OZZIE
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.