Cihaz genişliğini javascript olarak alın

Görüntü alanı genişliğinin aksine, javascript kullanarak kullanıcıların cihaz genişliğini almanın bir yolu var mı?

CSS medya sorguları, söyleyebileceğim gibi bunu sunuyor

@media screen and (max-width:640px) {
    /* ... */
}

ve

@media screen and (max-device-width:960px) {
    /* ... */
}

Akıllı telefonları yatay yönde hedefliyorsam bu kullanışlıdır. Örneğin, iOS'ta max-width:640pxbir iPhone 4'te bile hem yatay hem de dikey modları hedefleyeceğine dair bir bildirim. Anladığım kadarıyla Android için durum böyle değil, bu nedenle bu örnekte cihaz genişliğinin kullanılması her iki yönü de başarıyla hedefliyor. masaüstü cihazları hedeflemeden.

Bununla birlikte , cihaz genişliğine dayalı bir javascript bağını çalıştırıyorsam, görüntü alanı genişliğini test etmekle sınırlı görünüyorum, bu da aşağıdaki gibi ekstra bir test anlamına gelir,

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

Cihaz genişliğinin css için mevcut olduğu ipucu göz önüne alındığında, bu bana şık görünmüyor.

Cihazın ekran genişliğini screen.width özelliği üzerinden alabilirsiniz.
Bazen pencere boyutunun genellikle cihazın ekran boyutundan daha küçük olduğu masaüstü tarayıcılarla uğraşırken ekran genişliği yerine window.innerWidth (genellikle mobil cihazlarda bulunmaz) kullanmak da yararlıdır.

Tipik olarak, mobil cihazlar VE masaüstü tarayıcılarla uğraşırken aşağıdakileri kullanıyorum:

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

Bryan Rieger'ın faydalı cevabıyla ilgili bir sorun, yüksek yoğunluklu ekranlarda Apple cihazlarının ekran genişliğini düşüş olarak bildirirken, Android cihazların bunu fiziksel piksel olarak bildirmesidir. (Bkz. Http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html .) if (window.matchMedia('(max-device-width: 960px)').matches) {}MatchMedia'yı destekleyen tarayıcılarda kullanmanızı öneririm.

Aklıma yeni bir fikir geldi, belki de ileriyi göremiyordur, ama iyi çalışıyor gibi görünüyor ve CSS ile JS'niz arasında en tutarlı olanı olabilir.

CSS'nizde html için maksimum genişlik değerini @media ekran değerine göre ayarlarsınız:

@media screen and (max-width: 480px) and (orientation: portrait){

    html { 
        max-width: 480px;
    }

    ... more styles for max-width 480px screens go here

}

Ardından, JS kullanarak (muhtemelen JQuery gibi bir çerçeve aracılığıyla), sadece html etiketinin maksimum genişlik değerini kontrol edersiniz:

maxwidth = $('html').css('max-width');

Şimdi bu değeri koşullu değişiklikler yapmak için kullanabilirsiniz:

If (maxwidth == '480px') { do something }

Max-width değerini html etiketine koymak korkutucu görünüyorsa, o zaman belki sadece bu amaç için kullanılan farklı bir etiket koyabilirsiniz. Amacım için html etiketi iyi çalışıyor ve işaretlememi etkilemiyor.

Sass, vb. Kullanıyorsanız kullanışlıdır : px değeri yerine kesme noktası adı gibi daha soyut bir değer döndürmek için aşağıdaki gibi bir şey yapabilirsiniz:

1. Kesme noktası adını depolayacak bir öğe oluşturun, örn. <div id="breakpoint-indicator" />
2. Css medya sorgularını kullanmak, bu öğenin içerik özelliğini değiştirir, örneğin "büyük" veya "mobil", vb. (Yukarıdakiyle aynı temel medya sorgusu yaklaşımı, ancak "maksimum genişlik" yerine css "içerik" özelliğini ayarlama).
3. $('#breakpoint-indicator').css('content');Medya sorgusu tarafından içerik özelliğinin neye ayarlandığına bağlı olarak "büyük" veya "mobil" vb. Döndüren js veya jquery (jquery örneğin ) kullanarak css içerik özelliği değerini alın .
4. Mevcut değere göre hareket edin.

Artık sass'ta yaptığınız gibi aynı kesme noktası adlarında hareket edebilirsiniz, örneğin sass: @include respond-to(xs)ve js if ($breakpoint = "xs) {}.

Bu konuda özellikle sevdiğim şey, kesme noktası isimlerimin tümünü css'de ve tek bir yerde (muhtemelen bir değişkenler scss belgesi) tanımlayabilmem ve js'imin bağımsız olarak hareket edebilmesidir.

var width = Math.max(window.screen.width, window.innerWidth);

Bu çoğu senaryoyu ele almalıdır.

Kullanmalısın

document.documentElement.clientWidth

Tarayıcılar arası uyumluluk olarak kabul edilir ve jQuery (window) .width () ile aynı yöntemdir; kullanımları.

Ayrıntılı bilgi için şu adrese göz atın: https://ryanve.com/lab/dimensions/

Bence kullanmanın çözümden window.devicePixelRatiodaha zarif olduğunu düşünüyorum window.matchMedia:

if (window.innerWidth*window.devicePixelRatio <= 960 
    && window.innerHeight*window.devicePixelRatio <= 640) { 
    ... 
}

kontrol et

const mq = window.matchMedia( "(min-width: 500px)" );

if (mq.matches) {
  // window width is at least 500px
} else {
  // window width is less than 500px
}

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

kolayca kullanabilirsin

document.documentElement.clientWidth

Lumia telefonları yanlış ekran genişliği veriyor (en azından emülatörde). Yani belki Math.min(window.innerWidth || Infinity, screen.width)tüm cihazlarda çalışacak mı?

Veya daha çılgın bir şey:

for (var i = 100; !window.matchMedia('(max-device-width: ' + i + 'px)').matches; i++) {}
var deviceWidth = i;

Ya mybe you can be document.documentElement.clientWidth to get the device width of client and keep on the device width by put on setInterval

aynen

setInterval(function(){
        width = document.documentElement.clientWidth;
        console.log(width);
    }, 1000);

Bilginize olduğu gibi, CSS'de ayarlandığı şekliyle maksimum genişliği algılayan ve <=, <,>,> = ve == işaretlerini kullanarak JS if-else koşullarında kullanmanıza izin veren kesme noktaları adlı bir kitaplık vardır . Oldukça faydalı buldum. Yük boyutu 3 KB'nin altında.