Làm cách nào để phát hiện mức thu phóng trang trong tất cả các trình duyệt hiện đại?

310

  1. Làm cách nào tôi có thể phát hiện mức thu phóng trang trong tất cả các trình duyệt hiện đại? Trong khi chủ đề này cho biết cách thực hiện trong IE7 và IE8, tôi không thể tìm thấy một giải pháp trình duyệt chéo tốt.

  2. Firefox lưu trữ mức thu phóng trang để truy cập trong tương lai. Khi tải trang đầu tiên, tôi có thể lấy mức thu phóng không? Ở đâu đó tôi đọc nó hoạt động khi thay đổi thu phóng xảy ra sau khi trang được tải.

  3. Có cách nào để bẫy 'zoom'sự kiện?

Tôi cần điều này vì một số tính toán của tôi dựa trên pixel và chúng có thể dao động khi phóng to.

Mẫu đã sửa đổi được cung cấp bởi @tfl

Trang này cảnh báo các giá trị chiều cao khác nhau khi phóng to. [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 
— chui
nguồn
1
Về cơ bản tôi muốn biết kích thước của DIV ở mức thu phóng 100%.
— understack
4
Về cơ bản không có cách nào để phát hiện thu phóng vào năm 2019 : Tôi đã thử nghiệm tất cả các giải pháp dưới đây trên Chrome 78 trên Mac Catalina và không có giải pháp nào trong số chúng hoạt động.
— collimarco

Câu trả lời:

274

Bây giờ nó là một mớ hỗn độn thậm chí còn lớn hơn khi câu hỏi này lần đầu tiên được hỏi. Từ việc đọc tất cả các phản hồi và bài đăng trên blog tôi có thể tìm thấy, đây là một bản tóm tắt. Tôi cũng thiết lập trang này để kiểm tra tất cả các phương pháp đo mức thu phóng này .

Chỉnh sửa (2011-12-12): Tôi đã thêm một dự án có thể được nhân bản: https://github.com/tombigel/detect-zoom

  • IE8 : screen.deviceXDPI / screen.logicalXDPI(hoặc, đối với mức thu phóng so với thu phóng mặc định, screen.systemXDPI / screen.logicalXDPI)
  • IE7 : var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;(nhờ ví dụ này hoặc câu trả lời này )
  • CHỈ FF3,5 : screen.width/ chiều rộng màn hình truy vấn phương tiện (xem bên dưới) (lợi dụng thực tế là screen.widthsử dụng pixel thiết bị nhưng chiều rộng MQ sử dụng pixel CSS - nhờ chiều rộng Quirksmode )
  • FF3.6 : không có phương thức đã biết
  • FF4 + : truy vấn phương tiện tìm kiếm nhị phân (xem bên dưới)
  • WebKit : https://www.chromestatus.com/feature/5737866978131968 (cảm ơn Teo trong các bình luận)
  • WebKit : đo kích thước ưa thích của div với -webkit-text-size-adjust:none.
  • WebKit : (bị hỏng từ r72591 ) document.width / jQuery(document).width()(nhờ Dirk van Oosterbosch ở trên ). Để có tỷ lệ về pixel của thiết bị (thay vì so với thu phóng mặc định), hãy nhân với window.devicePixelRatio.
  • WebKit cũ? (chưa được xác minh): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth(từ câu trả lời này )
  • Opera :document.documentElement.offsetWidth / chiều rộng của một position:fixed; width:100%div. từ đây ( bảng độ rộng của Quirksmode cho biết đây là một lỗi; InternalWidth phải là CSS px). Chúng tôi sử dụng vị trí: phần tử cố định để có được chiều rộng của khung nhìn bao gồm cả không gian nơi các thanh cuộn nằm ; document.documentEuity.clientWidth không bao gồm chiều rộng này. Điều này đã bị phá vỡ kể từ khoảng năm 2011; Tôi biết không có cách nào để có được mức thu phóng trong Opera nữa.
  • Khác : Giải pháp Flash từ Sebastian
  • Không đáng tin cậy: lắng nghe các sự kiện chuột và đo lường sự thay đổi trong screenX / thay đổi trong clientX

Đây là một tìm kiếm nhị phân cho Firefox 4, vì tôi không biết bất kỳ biến nào được hiển thị:

<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
nguồn
1
Công việc rất tuyệt, mặc dù điều này không hoạt động với tôi trong IE 8.0.7601.17514 (mới nhất). Bất kỳ cơ hội nào để kết thúc tất cả điều này trong một hàm getZoom () hoạt động trên tất cả các trình duyệt? Có lẽ cũng phát hành như một plugin jQuery? Làm việc tốt trở lại.
— ripper234
1
@yonran plugin tuyệt vời!, Nhưng nó không hoạt động trong IE9 nên zoom: screen.deviceXDPI / screen.logicalXDPI,thay vào đózoom: screen.systemXDPI / screen.logicalXDPI,
— Daniel
1
@RobW, khi tôi lần đầu tiên viết bài này cho Firefox 4, Firefox đã không có matchMedia. Paul Irish cũng đã viết một polyfill matchMedia tương tự là một phần của Modernizr .
— yonran
7
Tin vui, mọi người! Họ cuối cùng đã làm điều đó! API Vieport! chromestatus.com/feature/5737866978131968 Tôi kiểm tra nó, công cụ tuyệt vời!
— Tèo
3
API Viewport chỉ hoạt động để thu phóng pinch; nếu bạn phóng to trên máy tính để bàn, nó cho biết tỷ lệ là 1. @Jason T Featheringham, có những lý do khác ngoài "phân biệt đối xử" để muốn biết mức thu phóng. Thu phóng được đặt trên tất cả các trang cho một tên miền, nhưng bạn có thể muốn xử lý nó khác nhau trong trang trò chơi hoặc cửa sổ bật lên tiện ích mở rộng so với bạn làm trong trang trợ giúp.
— Pudica
61

Bạn co thể thử

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

Điều này sẽ cung cấp cho bạn mức phần trăm thu phóng của trình duyệt trên màn hình không phải võng mạc. Đối với màn hình DPI / retina cao, nó sẽ mang lại các giá trị khác nhau (ví dụ: 200 cho Chrome và Safari, 140 cho Firefox).

Để bắt sự kiện thu phóng, bạn có thể sử dụng

$(window).resize(function() { 
// your code 
});
— người dùng1080481
nguồn
1
Hoạt động hoàn hảo, cũng trên thiết bị di động. Nó cũng khá thú vị để xem những thiết bị di động có những gì devicePixelRatio. Điều này cũng giúp tôi chuyển đổi một fixedyếu tố thành yếu tố định absolutevị ly khi sự kiện thu phóng xảy ra hoặc khi giá trị ban đầu của các devicePixelRatiothay đổi. Hoàn hảo! Cảm ơn bạn!!
— lowTechsun
12
Không hoạt động như mong đợi: Nó trả lại 200 trong Chrome trên MacBook với võng mạc khi trình duyệt không được phóng to.
— Terite
19
Các trình duyệt có hỗ trợ cho màn hình DPI cao sẽ không mang lại kết quả như mong đợi khi sử dụng màn hình đó, Safari cũng không hiển thị.
— Fredrik C
Chỉ dành cho bất cứ ai quan tâm, trên IE này chỉ hoạt động trên IE11 (nó sẽ trả lại NaN trên IE10 trở xuống)
— scunliffe
3
Math.round(window.devicePixelRatio * 100)hoạt động trên Chrome, IE, Edge và Firefox. Safari trên iMac luôn trả về 200.
— Super Jade
45

Đối với tôi, đối với Chrome / Webkit, document.width / jQuery(document).width()không hoạt động. Khi tôi làm cho cửa sổ của mình nhỏ và phóng to vào trang web của mình sao cho thanh cuộn ngang xuất hiện, document.width / jQuery(document).width()không bằng 1 ở mức thu phóng mặc định. Điều này là do document.widthbao gồm một phần của tài liệu bên ngoài khung nhìn.

Sử dụng window.innerWidthvà window.outerWidthlàm việc. Vì một số lý do trong Chrome, outsWidth được đo bằng pixel màn hình và InsideWidth được đo bằng pixel 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";
}
— người dùng800583
nguồn
1
Rất đẹp. Và nếu bạn chỉ cần biết liệu nó có được phóng to hay không trong Chrome:isZoomed = (screenCssPixelRatio < .98 || screenCssPixelRatio > 1.02)
— Brent Faust
1
Chà, window.outerWidth cũng được thay đổi với zoom. Ngoài ra, không phải trên mọi HĐH, độ rộng viền cửa sổ là 8 pixel (ngay cả trên cùng một HĐH, thiết kế có thể thay đổi). Tuy nhiên tôi sẽ đề nghị trừ 16, không phải 8, vì bạn có viền cửa sổ hai lần. Ngoài ra, một số trình duyệt có đường viền trên cửa sổ kết xuất thực tế của họ (như FF) và một số không (Safari) - nhưng ngay cả điều này phụ thuộc vào hệ điều hành bạn sử dụng trình duyệt (ví dụ Safari có đường viền trên Windows). Sao lưu phần bên trong ban đầu (ví dụ như khi tải trang) và sử dụng nó để so sánh hoạt động tốt hơn nhưng chỉ khi thu phóng có điều kiện là 100% ...
— StanE
1
Kết quả 0 không có vấn đề gì với tôi (2017, feb).
— Tiberiu-Ionuț Stan
1
switchtuyên bố có thể tốt hơn nhiều nếu tuyên bố khác.
— Edric
Nó không hoạt động: chỉ được thử nghiệm trên Chrome trên Mac và nó luôn trả về cùng một tỷ lệ, bất kể mức thu phóng
— collimarco
16

Đồng nghiệp của tôi và tôi đã sử dụng tập lệnh từ https://github.com/tombigel/detect-zoom . Ngoài ra, chúng tôi cũng tự động tạo một phần tử svg và kiểm tra thuộc tính currentScale của nó. Nó hoạt động rất tốt trên Chrome và hầu hết các trình duyệt cũng vậy. Trên FF, tính năng "chỉ thu phóng văn bản" phải được tắt. SVG được hỗ trợ trên hầu hết các trình duyệt. Tại thời điểm viết bài này, đã thử nghiệm trên IE10, FF19 và 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);
— Jay
nguồn
Phương pháp này hiện luôn báo cáo svg.c hiệnScale = 1 trong Firefox 29. Có lẽ vì chúng thay đổi kích thước toàn bộ số liệu màn hình dựa trên thu phóng là một lỗi . IE11 dường như có cùng một vấn đề trên Máy tính để bàn với chiều cao màn hình được điều chỉnh theo thiết bị khung nhìnPixelRatio, khá khó khăn.
— hexalys
11

Tôi thấy bài viết này rất hữu ích. Rất cảm ơn yonran. Tôi muốn truyền lại một số kiến ​​thức bổ sung mà tôi đã tìm thấy trong khi thực hiện một số kỹ thuật anh ấy cung cấp. Trong FF6 và Chrome 9, hỗ trợ cho các truy vấn phương tiện từ JS đã được thêm vào, điều này có thể đơn giản hóa rất nhiều cách tiếp cận truy vấn phương tiện cần thiết để xác định thu phóng FF. Xem tài liệu tại MDN tại đây . Đối với mục đích của tôi, tôi chỉ cần phát hiện xem trình duyệt được phóng to hay thu nhỏ, tôi không cần hệ số thu phóng thực tế. Tôi đã có thể nhận được câu trả lời của mình với một dòng JavaScript:

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

Kết hợp điều này với các giải pháp IE8 + và Webkit, cũng là các dòng đơn lẻ, tôi có thể phát hiện thu phóng trên phần lớn các trình duyệt đánh vào ứng dụng của chúng tôi chỉ bằng một vài dòng mã.

— brianh
nguồn
4
Bạn có thể vui lòng cung cấp mã làm thế nào để phát hiện thu phóng thực tế bằng truy vấn phương tiện không?
— TN.
Hãy thử chỉ sử dụng "(width: <X> px) và (height: <Y> px)" trong đó <X> và <Y> lần lượt là window.innerWidth và window.innerHeight. Nó hoạt động ngay cả đối với số lượng zoom rất nhỏ. Hoạt động trong Safari cũng vậy.
— tối đa
@max Bạn có thể cung cấp một mã JSFIddle hoặc mã mẫu về cách thức giao diện này được đặt cùng nhau không?
— lowTechsun
Luôn báo cáo đúng trên các thiết bị võng mạc như macbook pro.
— Matthew Sanders
codepen.io/anon/pen/LgrGjJ hiển thị tìm kiếm nhị phân với các truy vấn phương tiện, nhưng điều này cũng giống như truy vấn devicePixelRatio: nó đưa vào tỷ lệ hiển thị tài khoản.
— ZachB
11 
zoom = ( window.outerWidth - 10 ) / window.innerWidth

Đó là tất cả những gì bạn cần.

— Alex von Thorn
nguồn
Tại sao trừ 10từ outerWidth?
— callum
Có lẽ là cho thanh cuộn. Mỗi thanh cuộn cũng khác nhau, như trong iOS nhỏ hơn nhiều. Ngoài ra, giải pháp này dường như chỉ được mạ crôm
— Sarah
1
Nó không hoạt động nếu người dùng có một thanh bên như dấu trang trong FF
— Gerrit Sedlaczek
7

Tôi có một giải pháp cho việc này kể từ tháng 1 năm 2016. Đã thử nghiệm làm việc trong các trình duyệt Chrome, Firefox và MS Edge.

Nguyên tắc như sau. Thu thập 2 điểm MouseEvent cách xa nhau. Mỗi sự kiện chuột đi kèm với tọa độ màn hình và tài liệu. Đo khoảng cách giữa 2 điểm trong cả hai hệ tọa độ. Mặc dù có các độ lệch cố định khác nhau giữa các hệ tọa độ do nội thất trình duyệt, khoảng cách giữa các điểm phải giống nhau nếu trang không được phóng to. Lý do chỉ định "cách xa nhau" (tôi đặt điều này là 12 pixel) là để có thể phát hiện các thay đổi thu phóng nhỏ (ví dụ 90% hoặc 110%).

Tham khảo: https://developer.mozilla.org/en/docs/Web/Events/mousemove

Các bước:

  1. Thêm một người nghe di chuyển chuột

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

  2. Chụp 4 số đo từ các sự kiện chuột:

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

  3. Đo khoảng cách d_c giữa 2 điểm trong hệ thống máy khách

  4. Đo khoảng cách d_s giữa 2 điểm trong hệ thống màn hình

  5. Nếu d_c! = D_s thì thu phóng được áp dụng. Sự khác biệt giữa hai cho bạn biết mức độ phóng to.

NB Chỉ hiếm khi thực hiện các phép tính khoảng cách, ví dụ: khi bạn có thể lấy mẫu một sự kiện chuột mới khác xa với sự kiện trước đó.

Hạn chế: Giả sử người dùng sẽ di chuyển chuột ít nhất một chút và không thể biết thu phóng cho đến thời điểm này.

— người dùng1191311
nguồn
1
Tôi đã tạo một fiddle: jsfiddle.net/Terite/9b6ko854 với "cách xa nhau" có nghĩa là 100 pixel. Thật không may, nó hoạt động không ổn định trên Firefox (52) trên MacBook với màn hình retina. Cũng cần lưu ý rằng thu phóng giao diện Window 7 125% được phát hiện trong Chrome, Firefox và IE11 (ở mức thu phóng 125% mặc định) là thu phóng trình duyệt.
— Terite
— Fiddle
Màn hình Retina thêm một mức độ khó khác vì chúng báo cáo kích thước pixel không chính xác, trong số những thứ khác.
— dùng1191311
5

Bạn có thể sử dụng API Visual Viewport :

window.visualViewport.scale;

Nó là tiêu chuẩn và hoạt động cả trên máy tính để bàn và thiết bị di động: hỗ trợ trình duyệt .

— collimarco
nguồn
Trông có vẻ tiện dụng, nhưng nó vẫn bị tắt theo mặc định trong máy tính để bàn của Firefox và không hoạt động trong Internet Explorer kể từ ngày 31/5/20.
— derekbaker783
3

Trong Internet Explorer 7, 8 & 9, điều này hoạt động:

function getZoom() {
    var screen;

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

"+0.9" được thêm vào để tránh lỗi làm tròn (nếu không, bạn sẽ nhận được 104% và 109% khi thu phóng trình duyệt được đặt thành 105% và 110% tương ứng).

Trong thu phóng IE6 không tồn tại, do đó không cần thiết phải kiểm tra thu phóng.

— pench
nguồn
1
Hấp dẫn. Đối với tôi, nó luôn hiển thị 80% thu phóng ... Tôi tin rằng điều này là do tôi đã thiết lập phông chữ lớn ở cấp độ Windows 7 (tìm kiếm "kích thước phông chữ" trong bảng điều khiển). Nó tốt hơn giải pháp IE8 trong câu trả lời của @ yonran hoàn toàn không hiệu quả với tôi. jsbin.com/obowof
— ripper234
Tôi nhận được 101% khi thu phóng được đặt thành 100%.
— Allen Wallace
tôi cũng vậy. sử dụng 0,4999 thay vì 0,9
— yan bellavance
tức làZoomLevel = ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.4999) .toFixed ();
— yan bellavance
3

Những gì tôi nghĩ ra là:

1) Thực hiện position:fixed <div>với width:100%( id = zoomdiv )

2) khi tải trang:

zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth

Và nó làm việc cho tôi ctrl+và ctrl-phóng to.

hoặc tôi có thể thêm dòng vào một $(window).onresize()sự kiện để có được mức thu phóng hoạt động

Mã số:

<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: đây là bài viết đầu tiên của tôi, xin lỗi

— Borhishek Borar
nguồn
3
Thật không may, điều này sẽ chỉ hoạt động nếu người dùng có trình duyệt tối đa hóa ( screen.availWidthbáo cáo độ rộng của màn hình theo pixel màn hình, không phải cửa sổ trình duyệt).
— Bailey Parker
3

Điều này đã làm việc rất tốt cho tôi trong các trình duyệt dựa trên 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;
}

Dường như không hoạt động trong Firefox.

Điều này cũng hoạt động trong WebKit:

var zoomLevel = document.width / document.body.clientWidth;
— rudolfrck
nguồn
5
document.widthtrả về không xác định
— Adam
Luôn trả về true bất kể zoom (2017, feb, retina display).
— Tiberiu-Ionuț Stan
3

Về cơ bản, chúng ta có:

  • window.devicePixelRatiotính đến cả mức thu phóng cấp trình duyệt * cũng như mật độ zoom / pixel của hệ thống.
    * - trên mức thu phóng của Mac / Safari không được tính đến
  • truy vấn phương tiện truyền thông
  • vw/ vhĐơn vị CSS
  • resize sự kiện, được kích hoạt khi thay đổi mức thu phóng, gây ra thay đổi kích thước cửa sổ hiệu quả

Điều đó là đủ cho UX bình thường . Nếu bạn cần phát hiện mức thu phóng có thể là dấu hiệu của thiết kế giao diện người dùng xấu.

Zoom-zoom khó theo dõi hơn và hiện không được xem xét.

— kirilloid
nguồn
1
window.devicePixelRatio là một câu trả lời hay, hoạt động trong phiên bản mới nhất của các trình duyệt chính - Chrome, Safari, FF, Edge, IE
— DShultz
@kirilloid bạn có tìm thấy bất cứ thứ gì có thể được sử dụng để tìm "mức thu phóng" đáng tin cậy trong Safari không?
— onassar
1

Tính toán của bạn vẫn dựa trên một số pixel CSS. Bây giờ chúng chỉ là một kích thước khác nhau trên màn hình. Đó là điểm thu phóng toàn trang.

Bạn muốn điều gì xảy ra trên trình duyệt trên thiết bị 192dpi, do đó thường hiển thị bốn pixel thiết bị cho mỗi pixel trong một hình ảnh? Ở mức thu phóng 50%, thiết bị này hiện hiển thị một pixel hình ảnh trong một pixel thiết bị.

— Neil
nguồn
@Neil: làm cách nào tôi có thể nhận được kích thước 'CSS pixel'?
— understack
CSS mặc định thành điểm, nhưng tất nhiên bạn có thể chỉ định pixel bằng cách sử dụng công cụ sửa đổi kích thước px. Đối với các thuộc tính thành phần được truy xuất trong JavaScript, các thuộc tính này phải có trong các pixel CSS. Vì vậy, nếu bạn chỉ định chiều rộng của <div> là 100px, thì đó là những gì bạn sẽ nhận được từ JavaScript, bất kể mức thu phóng có thể là bao nhiêu.
— Neil
1

Trên Chrome

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");
— Nicolas Giszpenc
nguồn
1
Chỉ hoạt động khi cửa sổ trình duyệt có toàn bộ chiều rộng của màn hình.
— tenbit
0

Không kiểm tra điều này cho IE, nhưng nếu bạn tạo một phần tử elemvới

min-width: 100%

sau đó 

window.document.width / elem.clientWidth

sẽ cung cấp cho bạn mức thu phóng trình duyệt của bạn (bao gồm cả document.body.style.zoomyếu tố).

— Dirk van Oosterbosch
nguồn
Đã thử nghiệm điều này nhưng phóng to dường như không làm tăng elem.clientWidth
— Tom
0

Đây là dành cho Chrome , theo câu trả lời của người dùng800583 ...

Tôi đã dành một vài giờ cho vấn đề này và không tìm thấy cách tiếp cận nào tốt hơn, nhưng:

  • Có 16 'zoomLevel' chứ không phải 10
  • Khi Chrome ở chế độ toàn màn hình / tối đa hóa tỷ lệ là window.outerWidth/window.innerWidthvà khi không, tỷ lệ dường như là (window.outerWidth-16)/window.innerWidth, tuy nhiên trường hợp thứ nhất có thể được tiếp cận bởi trường hợp thứ hai.

Vì vậy, tôi đã đến ...

Nhưng cách tiếp cận này có những hạn chế: ví dụ: nếu bạn chơi accordion với cửa sổ ứng dụng (phóng to nhanh và giảm độ rộng của cửa sổ) thì bạn sẽ có khoảng cách giữa các mức thu phóng mặc dù mức thu phóng không thay đổi (có thể là ngoàiWidth và bên trongWidth không cập nhật chính xác cùng một lúc).

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

Và nếu bạn muốn yếu tố:

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
nguồn
Tôi gặp vấn đề với "window.outerWidth / window.innerWidth" cũng cho tôi giá trị sai và đó có thể là do tôi đang ở trong iframe. Vì vậy, những gì tôi đã làm là tôi đã sử dụng cửa sổ cha mẹ và nó đã cho câu trả lời đúng: window.parent.window.outerWidth / window.parent.window.innerWidth
— yan bellavance
0

Tôi có giải pháp này chỉ dành cho thiết bị di động (đã thử nghiệm với 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());

});

Nếu bạn muốn mức thu phóng ngay sau khi di chuyển chụm, có lẽ bạn sẽ phải đặt một chút thời gian chờ vì độ trễ kết xuất (nhưng tôi không chắc vì tôi đã không kiểm tra nó).

— pmrotule
nguồn
0

Câu trả lời này dựa trên các nhận xét về devicePixelRatio trở lại không chính xác trên câu trả lời của user1080481.

Tôi thấy rằng lệnh này cũng quay trở lại không chính xác trong một số trường hợp khi làm việc với máy tính để bàn, Surface Pro 3 và Surface Pro 4.

Những gì tôi tìm thấy là nó hoạt động trên máy tính để bàn của tôi, nhưng SP3 và SP4 đã cho các số khác nhau và máy tính để bàn.

Mặc dù vậy, tôi nhận thấy rằng SP3 đã trở lại gấp 1 lần rưỡi mức thu phóng mà tôi mong đợi. Khi tôi xem các cài đặt hiển thị, SP3 thực sự được đặt thành 150% thay vì 100% tôi có trên máy tính để bàn của mình.

Vì vậy, giải pháp cho các bình luận nên là chia mức thu phóng được trả về cho tỷ lệ của máy bạn hiện đang sử dụng.

Tôi đã có thể lấy tỷ lệ trong cài đặt Windows bằng cách thực hiện như sau:

ManagementObjectSearcher searcher = new ManagementObjectSearcher("SELECT * FROM Win32_DesktopMonitor");
double deviceScale = Convert.ToDouble(searcher.Get().OfType<ManagementObject>().FirstOrDefault()["PixelsPerXLogicalInch"]);
int standardPixelPerInch = 96;
return deviceScale / standardPixelPerInch;

Vì vậy, trong trường hợp SP3 của tôi, đây là cách mã này nhìn phóng to 100%:

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

Nhân với 100 trong câu trả lời ban đầu của người dùng1080481 sẽ cho bạn thu phóng 100 (%).

— Cameron Weaver
nguồn
0

Có nó hiện đang làm việc tuy nhiên vẫn cần phải phân tách bằng trình duyệt. Đã thử nghiệm thành công trên Chrome (75) và Safari (11.1) (chưa tìm thấy đường cho FF). Nó cũng nhận được giá trị thu phóng chính xác trên màn hình võng mạc và các tính toán được kích hoạt khi thay đổi kích thước sự kiện.

    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()
    };
  }
— Yogi
nguồn
-1

ở đây nó không thay đổi!:

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

tạo một tệp html đơn giản, nhấp vào nút. bất kể mức thu phóng nào: nó sẽ hiển thị cho bạn chiều rộng 400px (ít nhất là với firefox và eg8)

@tfl: đó là vì bạn đã sửa chiều rộng theo kiểu nội tuyến. Tôi đã sửa đổi mẫu của bạn để hiển thị trường hợp của tôi (được đăng trong câu hỏi ban đầu).
— understack
-1

Điều này có thể hoặc không thể giúp đỡ bất cứ ai, nhưng tôi đã có một trang mà tôi không thể vào trung tâm một cách chính xác cho dù tôi đã thử dùng thủ thuật Css nào vì vậy tôi đã viết một trang Trung tâm cuộc gọi tệp JQuery:

Sự cố xảy ra với mức thu phóng của trình duyệt, trang sẽ thay đổi dựa trên nếu bạn là 100%, 125%, 150%, v.v.

Mã dưới đây nằm trong tệp JQuery có tên là Centerpage.js.

Từ trang của tôi, tôi phải liên kết với JQuery và tệp này để làm cho nó hoạt động, mặc dù trang chính của tôi đã có liên kết đến 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();
});

Ngoài ra nếu bạn muốn tập trung vào một bảng điều khiển:

// 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);
    }
}
— người dùng1054326
nguồn
-1

Đây là câu hỏi đã được đăng từ nhiều năm trước, nhưng hôm nay khi tôi đang tìm kiếm cùng một câu trả lời "Cách phát hiện sự kiện phóng to và thu nhỏ", tôi không thể tìm thấy một câu trả lời phù hợp với tất cả các trình duyệt.

Như bây giờ: Đối với Firefox / Chrome / IE8 và IE9, việc phóng to và thu nhỏ sẽ kích hoạt một sự kiện window.resize. Điều này có thể được ghi lại bằng cách sử dụng:

$(window).resize(function() {
//YOUR CODE.
});
— Bhumi Singhal
nguồn
-1

Một cách giải quyết cho FireFox 16+ để tìm DPPX (mức thu phóng) hoàn toàn bằng 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);
— lexass
nguồn
Nó không hoạt động như mong đợi trong Firefox (52) trên MacBook với màn hình retina - trả về 2 khi không phóng to. Tôi đã tạo một fiddle: jsfiddle.net/Terite/wadkh3ea
— Terite 22/03/2017
-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
nguồn
6
Vui lòng giải thích làm thế nào mã của bạn hoạt động. Điều đó sẽ hữu ích nếu một số người mới tìm thấy câu trả lời của bạn.
— displayName
Tôi đã tạo một fiddle: jsfiddle.net/Terite/5n1bk9do Như @AlexeySh. đã đề cập, nó không hoạt động như mong đợi trên màn hình võng mạc trong Chrome (56), Firefox (52). Nó cũng hiển thị 0 trong zoom trên Safari (10).
— Terite
-1

Vấn đề nằm ở các loại màn hình được sử dụng, màn hình 4k so với màn hình tiêu chuẩn. Chrome cho đến nay là thông minh nhất có thể cho chúng tôi biết mức thu phóng chỉ bằng cách sử dụngwindow.devicePixelRatio , rõ ràng nó có thể cho biết mật độ pixel là bao nhiêu và báo cáo lại cùng một con số cho vấn đề gì.

Các trình duyệt khác, không quá nhiều. IE và Edge có lẽ là tồi tệ nhất, vì chúng xử lý các mức thu phóng khác nhau nhiều. Để có được văn bản có cùng kích thước trên màn hình 4k, bạn phải chọn 200%, thay vì 100% trên màn hình tiêu chuẩn.

Kể từ tháng 5 năm 2018, đây là những gì tôi phải phát hiện các mức thu phóng cho một vài trình duyệt phổ biến nhất, Chrome, Firefox và IE11. Tôi có nó cho tôi biết tỷ lệ phần trăm thu phóng là gì. Đối với IE, nó báo cáo 100% ngay cả đối với màn hình 4k thực sự ở mức 200%, nhưng kích thước văn bản thực sự giống nhau.

Đây là một câu đố: https://jsfiddle.net/ae1hdogr/

Nếu bất cứ ai quan tâm đến việc đâm vào các trình duyệt khác và cập nhật fiddle, xin vui lòng làm như vậy. Mục tiêu chính của tôi là bảo vệ 3 trình duyệt này để phát hiện xem mọi người có đang sử dụng hệ số thu phóng lớn hơn 100% để sử dụng ứng dụng web của tôi hay không và hiển thị thông báo gợi ý hệ số thu phóng của bên cho thuê.

— Hóa đơn
nguồn
Safari trên Mac Book Pro (màn hình retina) trả về 0, Chrome trên màn hình không võng mạc trả về chính xác có vẻ như 100, 90, v.v.
— OZZIE
Trả về 200 trên màn hình võng mạc của Chrome & Firefox
— OZZIE
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.