Nasıl sayfa tüm modern tarayıcılarda yakınlaştırma düzeyini tespit etmek için?

SORU

11 Kasım 2009, ÇARŞAMBA

Nasıl sayfa tüm modern tarayıcılarda yakınlaştırma düzeyini tespit etmek için?

Nasıl algılamak sayfa tüm modern tarayıcılarda seviye zoom yapabilir miyim? Bu 16 ** IE 7'de bunu nasıl söyler ve IE8, çapraz tarayıcı iyi bir çözüm bulamıyorum.
Firefox mağazaları sayfası gelecek erişim için yakınlaştırma düzeyi. İlk sayfa yükleme, yakınlaştırma düzeyini alabilir miyim? Bir yere zum değişikliği oluştuğunda çalıştığını okudumsonrasayfa yüklenir.
Tuzak için bir yol 'zoom' olay var mı?

Hesaplarıma bazı piksel tabanlı ve Yakınlaştırılmış zaman dalgalanma olabilir, çünkü buna ihtiyacım var.

Değiştirilmiş örnek @tfl tarafından verildi

Bu sayfa yakınlaştırma, farklı yükseklik değerleri uyarır. [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>

CEVAP

22 ŞUBAT 2011, Salı

Şimdi bu soru ilk sorulduğunda olduğundan daha da büyük bir karmaşa var. Bulabildiğim tüm yanıtları ve blog yazılarını okuyunca, burada bir özet. Ben de this page to test all these methods of measuring the zoom level ayarlayın.

Edit(2011-12-12): klonlanmış bir proje ekledim: https://github.com/tombigel/detect-zoom

IE8: 4* *(ya da, seviye varsayılan göreli zoom için screen.systemXDPI / screen.logicalXDPI)
7: 6* *(this example this answer sayesinde)
FF3.5 SADECE: screen.width / media ekran genişliği (aşağıya bakınız) (screen.width aygıt piksel kullanır ama Quirksmode widths--sayesinde CSS piksel genişliği kullanır MQ gerçeği yararlanır) sorgu
FF3.6: bilinen bir yöntem
FF4: medya ikili arama (aşağıya bakınız) sorgular
Y: -webkit-text-size-adjust:none ile bir dıv tercih boyutunu ölçmek.
Y: (r72591 beri kırık)* *10 (Dirk van Oosterbosch above sayesinde). Aygıt piksel (yerine varsayılan zoom göreceli) açısından oranı elde etmek için, window.devicePixelRatio ile çarpın.
Eski Y?(doğrulanmamış): 12* *(this answer)
Opera: document.documentElement.offsetWidth / position:fixed; width:100% bir div genişliği. 26* *(Quirksmode's widths table bir hata olduğunu söylüyor; innerWidth CSS px olmalıdır). Pozisyon:görünüm genişliğini almak için sabit unsur kullanıyoruzkaydırma çubukları bulunduğu alan da dahil olmak üzere; belge.documentElement.clientWidth bu genişliği hariç. Bu 2011; Opera seviyesi artık zoom ve bir yol biliyorum bir gün bu yana bozuk.
Diğer: Flash solution from Sebastian
Güvenilmez: fare olayları dinlemek ve clientX içinde screenX / değişiklik ölçmek

İşte Firefox için bir ikili arama açıldığı herhangi bir değişken bilemediğim için: 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>

Bunu Paylaş: