Làm cách nào để xác định mức thu phóng hiện tại của cửa sổ trình duyệt?

Question

Tôi muốn tìm hiểu mức thu phóng của nội dung đang được hiển thị trong cửa sổ trình duyệt dựa trên số javascripts' window object properties mà tôi có quyền truy cập. Tôi dường như không thể tìm thấy công thức toán học phù hợp cho zoom dựa trên chiều rộng bên trong, bù đắp trang, vv. Tôi tìm thấy một giải pháp, nhưng sử dụng lệnh gọi document.body.getBoundingClientRect không trả về bất kỳ thứ gì trong trường hợp của tôi và mà tôi không thể nói nếu có sự thay thế thích hợp từ các thuộc tính cửa sổ. Tôi đang sử dụng Safari.

Answer 1

Bạn có thể xác định mức độ phóng bằng cách so sánh các thuộc tính khác nhau để document.documentElement.clientWidth tùy thuộc vào trình duyệt của bạn:

• vs window.outerWidth (trên Opera)
• vs document.defaultView.getComputedStyle(document.documentElement, null).width (trên Safari, Chrome)
• hoặc so sánh screen.deviceXDPI và screen.logicalXDPI (trên IE8).

Tỷ lệ những giá trị này là mức độ zoom hiện tại (ví dụ tỷ lệ 2 chỉ ra một zoom 200%).

Answer 2

đây là phương pháp ước tính sơ bộ xác định tỷ lệ thu phóng bằng cách xem xét sự khác biệt giữa chiều rộng bên trong và chiều rộng của cửa sổ (có và không có thanh cuộn) và so sánh chiều rộng của thanh cuộn với tỷ lệ 100%. Nó hiện phụ thuộc vào jquery, và một số công việc cần được thực hiện để tìm ra chiều rộng thanh cuộn mong đợi chính xác cho các trình duyệt khác nhau (hiện tại chỉ sử dụng 15 pixel, có vẻ là về chuẩn).

function getZoom(){ 

    var ovflwTmp = $('html').css('overflow'); 
    $('html').css('overflow','scroll'); 

    var viewportwidth; 
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 
    if (typeof window.innerWidth != 'undefined') { 
     viewportwidth = window.innerWidth; 
    } else if (typeof(document.documentElement) != 'undefined' && 
     typeof document.documentElement.clientWidth != 'undefined' && 
     document.documentElement.clientWidth != 0) { 
     // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 
     viewportwidth = document.documentElement.clientWidth; 
    } else { 
     // older versions of IE 
     viewportwidth = document.getElementsByTagName('body')[0].clientWidth; 
    } 

    var windW = $(window).width(); 
    var scrollBarW = viewportwidth - windW; 

    if(!scrollBarW) return 1; 

    $('html').css('overflow',ovflwTmp); 

    return (15/scrollBarW); 
} 

Trong khi điều này không hoàn hảo, tốt nhất là tôi đã có thể nghĩ ra điều này. Tôi hiện đang sử dụng nó để biết khi nào để phục vụ hình ảnh có độ phân giải cao, nếu người dùng đã thu nhỏ đến mức làm cho chúng mờ đi.