Tüm modern tarayıcılarda sayfa yakınlaştırma seviyesi nasıl algılanır?

310

  1. Tüm modern tarayıcılarda sayfa yakınlaştırma seviyesini nasıl tespit edebilirim? Bu konu IE7 ve IE8'de nasıl yapılacağını söylese de, iyi bir çapraz tarayıcı çözümü bulamıyorum.

  2. Firefox, ileride erişmek için sayfa yakınlaştırma seviyesini kaydeder. İlk sayfa yüklemesinde, yakınlaştırma seviyesini elde edebilir miyim? Okuduğum bir yerde , sayfa yüklendikten sonra bir zum değişikliği meydana geldiğinde çalışır .

  3. 'zoom'Etkinliği yakalamanın bir yolu var mı ?

Bazı hesaplamalar piksel tabanlı ve yakınlaştırıldığında dalgalanma olabilir çünkü buna ihtiyacım var.

@Tfl tarafından verilen değiştirilmiş örnek

Bu sayfa yakınlaştırıldığında farklı yükseklik değerlerini 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>
javascript  browser  zoom  detection 
— understack
kaynak
1
Temelde bir DIV'nin boyutunu% 100 zoom ile bilmek istiyorum.
— understack
4
Temel olarak 2019'da yakınlaştırmayı tespit etmenin bir yolu yok : Mac Catalina'ta Chrome 78'de aşağıdaki tüm çözümleri test ettim ve hiçbiri işe yaramadı.
— collimarco

Yanıtlar:

274

Şimdi bu soru ilk sorulduğunda olduğundan daha büyük bir karmaşa. Bulabildiğim tüm yanıtları ve blog gönderilerini okuduktan sonra, bir özet. Ayrıca, bu sayfayı yakınlaştırma seviyesini ölçmenin tüm bu yöntemlerini test edecek şekilde ayarladım .

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

  • IE8 : screen.deviceXDPI / screen.logicalXDPI(veya varsayılan zum oranına göre zum seviyesi için screen.systemXDPI / screen.logicalXDPI)
  • IE7 : var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;( bu örnek veya bu cevap sayesinde )
  • SADECE FF3.5 : screen.width/ medya sorgusu ekran genişliği (aşağıya bakın) ( screen.widthcihaz piksellerini kullanan ancak MQ genişliği CSS piksellerini kullanan gerçeğinden yararlanır - Quirksmode genişlikleri sayesinde )
  • FF3.6 : bilinen bir yöntem yok
  • FF4 + : medya ikili aramayı sorgular (aşağıya bakın)
  • WebKit : https://www.chromestatus.com/feature/5737866978131968 (yorumlardaki Teo sayesinde)
  • WebKit : div öğesinin tercih edilen boyutunu ölçün -webkit-text-size-adjust:none.
  • WebKit : ( r72591'den beri kırık ) document.width / jQuery(document).width()( yukarıdaki Dirk van Oosterbosch sayesinde ). Oranı cihaz pikselleri cinsinden almak için (varsayılan zuma göre değil) çarpın window.devicePixelRatio.
  • Eski WebKit? (doğrulanmamış): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth( bu yanıttan )
  • Opera : document.documentElement.offsetWidth/ position:fixed; width:100%div genişliği . Buradan ( Quirksmode en genişlikleri tablo bu bir hata olduğunu söylüyor; innerWidth CSS px olmalıdır). Kaydırma çubuklarının bulunduğu alan da dahil olmak üzere görünümün genişliğini elde etmek için position: fixed öğesini kullanırız ; document.documentElement.clientWidth bu genişliği hariç tutar. Bu, 2011'in bir döneminden bu yana kırılıyor; Artık Opera'da zum seviyesine ulaşmanın bir yolunu bilmiyorum.
  • Diğer : Sebastian'dan flash çözümü
  • Güvenilmez: fare olaylarını dinleyin ve screenX'deki değişikliği / clientX'deki değişikliği ölçün

İşte maruz kaldığı herhangi bir değişken bilmiyorum çünkü Firefox 4 için bir ikili arama:

<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
kaynak
1
IE 8.0.7601.17514 (en son) benim için işe yaramasa da çok güzel bir çalışma. Tüm bunları tüm tarayıcılarda çalışan tek bir getZoom () işlevinde tamamlama şansınız var mı? Belki de bir jQuery eklentisi olarak yayınlandı? Yine iyi iş çıkardın.
— ripper234
1
@yonran büyük eklentisi !, Ama zoom: screen.deviceXDPI / screen.logicalXDPI,yerine olması gereken IE9 çalışmıyorzoom: screen.systemXDPI / screen.logicalXDPI,
— Daniel
1
@RobW, bunu Firefox 4 için ilk yazdığımda, Firefox'ta yoktu matchMedia. Paul İrlandalı ayrıca yazdığı benzer matchMedia polyfill parçasıdır Modernizr .
— yonran
7
Herkese iyi haberlerimiz var! Sonunda başardılar! Vieport API! chromestatus.com/feature/5737866978131968 Test ediyorum, harika şeyler!
— Teo
3
Viewport API yalnızca sıkıştırma yakınlaştırma için çalışır; Eğer masaüstünü yakınlaştırırsanız ölçeğin 1 olduğunu söyler. @Jason T Featheringham, yakınlaştırma düzeyini bilmek için "ayrımcılık" dışında başka nedenler de vardır. Yakınlaştırma, bir etki alanının tüm sayfalarında ayarlanır, ancak bir oyun sayfasında veya uzantı açılır penceresinde bunu yardım sayfasında olduğundan farklı işlemek isteyebilirsiniz.
— Pudica
61

Deneyebilirsin

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

Bu, retina olmayan ekranlarda tarayıcı yakınlaştırma yüzdesi seviyesini verecektir. Yüksek DPI / retina ekranlar için farklı değerler verir (ör. Chrome ve Safari için 200, Firefox için 140).

Yakınlaştırma etkinliğini yakalamak için şunları kullanabilirsiniz:

$(window).resize(function() { 
// your code 
});
— user1080381
kaynak
1
Mobil cihazlarda da mükemmel çalışır. Hangi mobil cihazların neye sahip olduğunu görmek de oldukça ilginç devicePixelRatio. Bu ayrıca , yakınlaştırma olayı meydana geldiğinde veya değişikliklerin başlangıç ​​değeri olduğunda bir fixedöğeyi yalnızca absolutekonumlandırılmış öğeye değiştirmeme yardımcı oldu devicePixelRatio. Mükemmel! Teşekkür ederim!!
— lowtechsun
12
Beklendiği gibi çalışmıyor: MacBook'ta Chrome'da 200, tarayıcı yakınlaştırılmadığında retina ile döner.
— Terite
19
Yüksek DPI ekranlarını destekleyen tarayıcılar, böyle bir ekran kullanılırken beklenen sonucu vermez, ekrandan bağımsız olarak Safari de olmaz.
— Fredrik C
Sadece herkes için umurunda, bu sadece IE11 çalışır IE üzerinde (o IE10 ya da aşağıda üzerinde NaN dönecektir) o
— scunliffe
3
Math.round(window.devicePixelRatio * 100)Chrome, IE, Edge ve Firefox'ta çalışır. İMac'teki Safari her zaman 200 döndürür.
— Super Jade
45

Benim için Chrome / Webkit için document.width / jQuery(document).width()çalışmadı. Penceremi küçülttüğümde ve yatay kaydırma çubuklarının görüneceği şekilde sitemi document.width / jQuery(document).width()yakınlaştırdığımda, varsayılan zumda 1'e eşit değildi. Bunun nedeni document.width, belgenin görünüm alanı dışındaki bir bölümünü içermesidir.

Kullanarak window.innerWidthve window.outerWidthçalıştı. Chrome'da bazı nedenlerden ötürü, dış genişlik ekran piksellerinde ve innerWidth ise css piksel cinsinden ölçülür.

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
kaynak
1
Çok hoş. Ve yalnızca Chrome'da yakınlaştırılmış olup olmadığını bilmeniz gerekiyorsa:isZoomed = (screenCssPixelRatio < .98 || screenCssPixelRatio > 1.02)
— Brent Faust
1
Window.outerWidth, zoom ile de değişir. Ayrıca, her işletim sisteminde pencere kenarlığı genişliği 8 pikseldir (aynı işletim sisteminde bile tasarım değişebilir). Ancak iki kez pencere sınırlarına sahip olduğunuz için 8 değil 16 özetini öneriyorum. Ayrıca, bazı tarayıcıların gerçek oluşturma pencerelerinde (FF gibi) bir kenarlığı vardır ve bazıları (Safari) değil - ancak bu bile tarayıcıyı kullandığınız işletim sistemine bağlıdır (örneğin, Safari'nin Windows'ta bir sınırı vardır). İlk innerWidth'i yedekleme (örn. Sayfa yükünde) ve karşılaştırmak için daha iyi çalışır, ancak yalnızca koşullu yakınlaştırma% 100 ise ...
— StanE
1
Benim için ne olursa olsun 0 çıktıları (2017, şubat).
— Tiberiu-Ionuț Stan
1
switchifadesi, if ifadelerinden çok daha iyi olabilir.
— Edric
— Çalışmıyor
16

İş arkadaşım ve ben senaryoyu https://github.com/tombigel/detect-zoom adresinden kullandık . Ayrıca, dinamik olarak bir svg öğesi oluşturduk ve currentScale özelliğini kontrol ettik. Chrome'da ve muhtemelen çoğu tarayıcıda harika çalışıyor. FF'de "yalnızca metni yakınlaştır" özelliğinin kapalı olması gerekir. SVG çoğu tarayıcıda desteklenir . Bu yazı yazıldığı sırada IE10, FF19 ve Chrome28 üzerinde test edildi.

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);
— alakarga
kaynak
Bu yöntem artık her zaman Firefox 29'da svg.currentScale = 1 değerini bildiriyor. Muhtemelen ekran hatalarının tamamını bir hata olan yakınlaştırmaya göre yeniden boyutlandırdıkları için . IE11, masa üstü ekran yüksekliği oldukça vidalı olan viewport cihazına ayarlanmış gibi görünüyor.
— hexalys
11

Bu makaleyi çok faydalı buldum. Yonran'a çok teşekkürler. Verdiği bazı teknikleri uygularken bulduğum bazı ek öğrenmeleri aktarmak istedim. FF6 ve Chrome 9'da, JS'deki medya sorguları için destek eklendi; bu, FF'deki yakınlaştırmayı belirlemek için gereken medya sorgusu yaklaşımını büyük ölçüde basitleştirebilir. MDN'deki dokümanlara bakın buradan bakın . Benim amacım için, sadece tarayıcının yakınlaştırılıp uzaklaştırıldığını tespit etmem gerekiyordu, gerçek yakınlaştırma faktörüne ihtiyacım yoktu. Cevabımı bir satır JavaScript ile alabildim:

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

Bunu aynı zamanda tek satır olan IE8 + ve Webkit çözümleriyle birleştirerek, sadece birkaç satır kodla uygulamamıza çarpan tarayıcıların büyük çoğunluğunda zumu tespit edebildim.

— brianh
kaynak
4
Medya sorgusunu kullanarak gerçek yakınlaştırmayı nasıl tespit edeceğinizi lütfen bir kod verebilir misiniz?
— TN.
<X> ve <Y> sırasıyla window.innerWidth ve window.innerHeight olan yalnızca "(width: <X> px) ve (height: <Y> px)" kullanmayı deneyin. Çok az miktarda zoom için bile çalışır. Safari'de de çalışır.
— maksimum
@max Bir JSFIddle veya bunun nasıl bir araya getirildiğine dair örnek bir kod sağlayabilir misiniz?
— lowtechsun
Macbook pro gibi retina cihazlarında her zaman doğru raporlar.
— Matthew Sanders
codepen.io/anon/pen/LgrGjJ , medya sorgularıyla ikili bir arama gösterir, ancak bu sorgulama ile aynıdır devicePixelRatio: görüntü ölçeklendirmeyi dikkate alır.
— ZachB
11 
zoom = ( window.outerWidth - 10 ) / window.innerWidth

Tek ihtiyacınız olan bu.

— Alex von Thorn
kaynak
Neden çıkarma 10dan outerWidth?
— callum
Muhtemelen kaydırma çubuğu için. Her kaydırma çubuğu da iOS'ta olduğu gibi çok daha küçük. Ayrıca bu çözüm sadece krom gibi görünüyor
— Sarah
1
Kullanıcının FF'deki yer işaretleri gibi bir kenar çubuğu varsa çalışmaz
— Gerrit Sedlaczek
7

Bunun için Ocak 2016'dan itibaren bir çözümüm var. Chrome, Firefox ve MS Edge tarayıcılarda çalışmayı test ettim.

İlke aşağıdaki gibidir. Uzakta olan 2 MouseEvent puanı topla. Her fare olayı ekran ve belge koordinatları ile birlikte gelir. Her iki koordinat sisteminde 2 nokta arasındaki mesafeyi ölçün. Tarayıcı mobilyası nedeniyle koordinat sistemleri arasında değişken sabit ofsetler olmasına rağmen , sayfa yakınlaştırılmamışsa noktalar arasındaki mesafe aynı olmalıdır. "Çok uzak" (12 piksel olarak koydum) belirtmenin nedeni, küçük zoom değişikliklerinin (örn.% 90 veya% 110) algılanabilmesidir.

Referans: https://developer.mozilla.org/en/docs/Web/Events/mousemove

Adımlar:

  1. Fare hareket dinleyicisi ekle

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

  2. Fare olaylarından 4 ölçüm yakalayın:

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

  3. İstemci sistemindeki 2 nokta arasındaki d_c mesafesini ölçün

  4. Ekran sistemindeki 2 nokta arasındaki mesafeyi d_s ölçün

  5. D_c! = D_s ise yakınlaştırma uygulanır. İkisi arasındaki fark size zoom miktarını söyler.

NB Mesafe hesaplamalarını nadiren yapın, örn. Öncekinden uzak yeni bir fare olayı örnekleyebildiğinizde.

Sınırlamalar: Kullanıcının fareyi en az biraz hareket ettireceğini ve yakın zamanın bu zamana kadar bilinemez olduğunu varsayar.

— user1191311
kaynak
1
Ben bir keman yarattım : 100 piksel anlamına gelen "uzak" ile jsfiddle.net/Terite/9b6ko854 . Ne yazık ki retina ekranlı MacBook'ta Firefox (52) üzerinde kararsız çalışıyor. Ayrıca, Chrome 7, Firefox ve IE11'de Windows 7 arabirimi yakınlaştırmasının% 125'inin tarayıcı yakınlaştırma olarak algılandığı (o zaman varsayılan olan% 125'te yakınlaştırma) tespit edildiğine dikkat edilmelidir.
— Terite
— Kemanın
Retina ekranları, başka şeylerin yanı sıra piksel boyutlarını yanlış bildirdikleri için başka bir zorluk seviyesi ekler.
— user1191311
3

Internet Explorer 7, 8 ve 9'da bu çalışır:

function getZoom() {
    var screen;

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

Yuvarlama hatalarını önlemek için "+0.9" eklenir (aksi takdirde, tarayıcı yakınlaştırma sırasıyla% 105 ve% 110'a ayarlandığında% 104 ve% 109 elde edersiniz).

IE6'da zoom mevcut değildir, bu nedenle zoom'u kontrol etmek gereksizdir.

— Pench
kaynak
1
İlginç. Benim için her zaman yakınlaştırmanın% 80'ini gösteriyor ... Bunun nedeni, Windows 7 düzeyinde büyük yazı tipleri kurulumuna sahip olduğuma (kontrol panelinde "yazı tipi boyutu" araması) inanıyorum. @ Yonran'ın cevabındaki IE8 çözümü benim için hiç işe yaramadı. jsbin.com/obowof
— ripper234 9:11
Zoom% 100 olarak ayarlandığında% 101 alıyorum.
— Allen Wallace
ben de. 0,9 yerine 0,4999 kullan
— yan bellavance
ieZoomLevel = ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.4999) .toFixed ();
— yan bellavance
3

Ne ile geldi:

1) Bir Make position:fixed <div>ile width:100%( id = zoomdiv )

2) sayfa yüklendiğinde:

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

Ve benim için çalıştı ctrl+vectrl- yakınlaştırdı.

veya $(window).onresize()etkin zum seviyesini elde etmek için bir olaya çizgi ekleyebilirim

Kod:

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

Not: bu benim ilk yazım, herhangi bir hatayı affedin

— Abhishek Borar
kaynak
3
Ne yazık ki, bu yalnızca kullanıcının tarayıcıyı en üst düzeye çıkarması durumunda işe yarar ( screen.availWidthekranın genişliğini tarayıcı penceresinde değil ekran pikselleri olarak bildirir).
— Bailey Parker
3

Bu, webkit tabanlı tarayıcılarda (Chrome, Safari) benim için harika çalıştı:

function isZoomed() {
    var width, mediaQuery;

    width = document.body.clientWidth;
    mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';

    return !window.matchMedia(mediaQuery).matches;
}

Yine de Firefox'ta çalışmıyor gibi görünüyor.

Bu WebKit'te de çalışır:

var zoomLevel = document.width / document.body.clientWidth;
— rudolfrck
kaynak
5
document.widthundefined
— Adam
Zoom ne olursa olsun her zaman true değerini döndürür (2017, feb, retina ekranı).
— Tiberiu-Ionuț Stan
3

Temel olarak:

  • window.devicePixelRatiohem tarayıcı düzeyinde yakınlaştırma * hem de sistem yakınlaştırma / piksel yoğunluğunu dikkate alır.
    * - Mac / Safari'de zum düzeyi dikkate alınmaz
  • medya sorguları
  • vw/ vhCSS birimleri
  • resize zum seviyesi değişikliğinde tetiklenen olay, pencere değişikliklerinin etkin boyutuna neden olur

bu normal için yeterli olmalı UX . Kötü kullanıcı arayüzü tasarımının bir işareti olabilecek yakınlaştırma seviyesini tespit etmeniz gerekiyorsa.

Pitch-zoom'un izlenmesi daha zordur ve şu anda dikkate alınmamaktadır.

— kirilloid
kaynak
1
window.devicePixelRatio, büyük tarayıcıların en son sürümünde çalışan iyi bir yanıttır - Chrome, Safari, FF, Edge, IE
— DShultz
@kirilloid Safari'de "zum seviyesini" güvenilir bir şekilde bulmak için kullanılabilecek bir şey buldunuz mu?
— onassar
1

Hesaplamalarınız hala bir dizi CSS pikseli temelindedir. Artık ekranda sadece farklı bir boyut var. Tam sayfa yakınlaştırma noktası budur.

192dpi aygıtındaki bir tarayıcıda normalde bir görüntüdeki her piksel için dört aygıt pikseli gösteren ne olmak isterdiniz? % 50 zoom ile bu cihaz artık bir cihaz pikselinde bir görüntü pikseli görüntülüyor.

— Neil
kaynak
@Neil: 'CSS pikselleri' boyutlarını nasıl alabilirim?
— understack
CSS varsayılan olarak noktalardır, ancak elbette px boyut değiştiricisini kullanarak pikselleri belirtebilirsiniz. JavaScript'te alınan öğe özelliklerine gelince, bunlar zaten CSS piksellerinde olmalıdır. Dolayısıyla, bir <div> genişliğini 100 piksel olarak belirtirseniz, yakınlaştırma düzeyi ne olursa olsun JavaScript'ten geri dönersiniz.
— Neil
1

Chrome'da

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");
— Nicolas Giszpenc
kaynak
1
Yalnızca tarayıcı penceresi ekranın tam genişliğine sahip olduğunda çalışır.
— tenbits
0

IE için bu test ama eğer bir öğe çıkarmadı mı elemile

min-width: 100%

sonra 

window.document.width / elem.clientWidth

size tarayıcı zum düzeyini verir ( document.body.style.zoomfaktör dahil ).

— Dirk van Oosterbosch
kaynak
Bunu test etti, ancak yakınlaştırma elem.clientWidth'i artırmıyor gibi görünüyor
— Tom
0

Bu Chrome için , user800583 yanıtının ardından ...

Bu sorun için birkaç saat geçirdim ve daha iyi bir yaklaşım bulamadım, ancak:

  • 10 değil 16 'zoomLevel' vardır
  • Chrome tam ekran olduğunda / maksimize edildiğinde orandır window.outerWidth/window.innerWidthve oran böyle görünmese (window.outerWidth-16)/window.innerWidthde 1. duruma 2. olana yaklaşılabilir.

Bu yüzden aşağıdakilere geldim ...

Ancak bu yaklaşımın sınırlamaları vardır: örneğin, akordeonu uygulama penceresiyle oynatırsanız (pencerenin genişliğini hızlı bir şekilde büyütür ve küçültür), yakınlaştırma değişmemiş olsa da (dış genişlik ve iç genişlik olmayabilir) yakınlaştırma seviyeleri arasında boşluklar alırsınız tam olarak aynı zamanda güncellenmiştir).

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

Ve faktörü istiyorsanız:

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
kaynak
Ben de bana yanlış değer veren "window.outerWidth / window.innerWidth" ile ilgili sorunlar vardı ve bu bir iframe içinde olduğu için olabilir. Yaptığım şey ana pencereyi kullandım ve doğru cevabı verdi:
— window.parent.window.outerWidth
0

Ben sadece mobil cihazlar için bu çözümü var (Android ile test edilmiştir):

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

});

Sıkıştırma hareketinden hemen sonra yakınlaştırma düzeyini istiyorsanız, oluşturma gecikmesi nedeniyle muhtemelen biraz zaman aşımı ayarlamanız gerekir (ancak test etmediğimden emin değilim).

— pmrotule
kaynak
0

Bu yanıt, devicePixelRatio kullanıcısının user1080381'in cevabına yanlış gelmesiyle ilgili yorumlara dayanmaktadır.

Bir masaüstü, Surface Pro 3 ve Surface Pro 4 ile çalışırken bu komutun bazı durumlarda yanlış geldiğini buldum.

Bulduğum şey, masaüstümde çalıştığı, ancak SP3 ve SP4'ün birbirinden ve masaüstünden farklı sayılar veriyordu.

Ben SP3 bekliyordum yakınlaştırma seviyesi 1 buçuk kez geri geliyor olduğunu fark ettim. Ekran ayarlarına baktığımda, masaüstümdeki% 100 yerine SP3 aslında% 150 olarak ayarlanmıştı.

Bu nedenle, yorumların çözümü, döndürülen zum düzeyini şu anda bulunduğunuz makinenin ölçeğine bölmek olmalıdır.

Aşağıdakileri yaparak ölçeği Windows ayarlarında elde edebildim:

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'üm durumunda, bu kod% 100 yakınlaştırmaya şöyle görünür:

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

User1080381'in orijinal yanıtında 100 ile çarpıldığında size 100 (%) yakınlaştırma yapılır.

— Cameron Weaver
kaynak
0

Şu anda çalışmasını sağlayın, ancak yine de tarayıcı tarafından ayrılması gerekir. Chrome (75) ve Safari'de (11.1) başarıyla test edildi (henüz FF için bir yol bulamadı). Ayrıca retina ekranında zoom değerini doğru hale getirir ve yeniden boyutlandırma olayında hesaplamalar tetiklenir.

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

burada değişmez !:

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

basit bir html dosyası oluşturun, düğmesine tıklayın. hangi yakınlaştırma seviyesinden bağımsız olarak size 400 piksel genişliğini gösterecektir (en azından firefox ve ie8 ile)

@tfl: Genişliği satır içi tarzda sabitlediğiniz için. Örneğimi, davamı gösterecek şekilde değiştirdim (orijinal soruya gönderildi).
— understack
-1

Bu kimseye yardımcı olabilir ya da olmayabilir, ama ben hangi Css hileler denedim ne olursa olsun doğru merkeze alamadım bir sayfa vardı, bu yüzden bir JQuery dosya çağrı Merkezi Sayfası yazdı:

Sorun tarayıcının yakınlaştırma düzeyiyle oluştu, sayfa% 100,% 125,% 150 vb.

Aşağıdaki kod centerpage.js adlı bir JQuery dosyasındadır.

Ana sayfam zaten JQuery için bir bağlantı olmasına rağmen, sayfamdan JQuery ve bu dosyayı çalışması için bağlantı vardı.

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

Ayrıca bir paneli ortalamak istiyorsanız:

// 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
kaynak
-1

Bu soru geri çağlar gibi gönderildi, ama bugün ben aynı cevap "Yakınlaştırma ve uzaklaştırma olayı nasıl tespit edilir" ararken, ben tüm tarayıcılar uyacak bir cevap bulamadık.

Şu anki gibi: Firefox / Chrome / IE8 ve IE9 için, yakınlaştırma ve uzaklaştırma bir window.resize olayını tetikler. Bu, aşağıdakiler kullanılarak yakalanabilir:

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

FireFox 16+ için yalnızca JavaScript ile DPPX (yakınlaştırma düzeyi) bulmak için bir geçici çözüm:

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
kaynak
Retina ekranlı MacBook'taki Firefox'ta (52) beklendiği gibi çalışmaz - yakınlaştırılmadığında 2 değerini döndürür. Bir keman yarattım
— 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
kaynak
6
Ayrıca kodunuzun nasıl çalıştığını da açıklayınız. Bazı acemi yanıtınızı bulursa bu yardımcı olacaktır.
— displayName
Bir keman yarattım : jsfiddle.net/Terite/5n1bk9do As @AlexeySh. Bahsedilen, Chrome (56), Firefox'ta (52) retina ekranında beklendiği gibi çalışmaz. Ayrıca Safari (10) üzerinde 0 zoom gösterir.
— Terite
-1

Sorun, kullanılan monitör türlerinde, standart monitörle karşılaştırıldığında 4k monitörde yatıyor. Chrome, sadece kullanarak yakınlaştırma seviyesinin ne olduğunu bize anlayabilen en akıllısıwindow.devicePixelRatio , görünüşe göre piksel yoğunluğunun ne olduğunu söyleyebilir ve ne olursa olsun aynı sayıyı rapor edebilir.

Diğer tarayıcılar çok fazla değil. IE ve Edge muhtemelen en kötüsüdür, zira zum seviyelerini çok farklı şekilde ele alırlar. Bir 4k monitörde aynı boyutta metin elde etmek için, standart monitörde% 100 yerine% 200 seçmelisiniz.

Mayıs 2018 itibariyle, en popüler tarayıcılardan bazıları olan Chrome, Firefox ve IE11 için yakınlaştırma düzeylerini tespit etmem gerek. Bana zum yüzdesinin ne olduđunu söyle. IE için, aslında% 200 olan 4k monitörler için bile% 100 bildirir, ancak metin boyutu gerçekten aynıdır.

İşte bir keman: https://jsfiddle.net/ae1hdogr/

Birisi diğer tarayıcılarda bir bıçak almak ve kemanı güncellemek isterse, lütfen bunu yapın. Ana hedefim, kullanıcıların web uygulamamı kullanmak için% 100'den daha fazla bir yakınlaştırma faktörü kullanıp kullanmadığını ve daha az bir yakınlaştırma faktörü öneren bir bildirim görüntülemek için bu 3 tarayıcıyı kapsamaktı.

— Bill_VA
kaynak
Mac Book Pro'da Safari (retina ekranı) 0 döndürür, retina olmayan ekranda Chrome doğru döner 100, 90 vb.
— Gibi görünür
Chrome ve Firefox retina ekranında 200 döndürür
— OZZIE
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.