$ (window) .width (), medya sorgusuyla aynı değil

186

Bir projede Twitter Bootstrap kullanıyorum. Varsayılan bootstrap stillerinin yanı sıra, bazılarını da ekledim

//My styles
@media (max-width: 767px)
{
    //CSS here
}

Ayrıca görünümün genişliği 767 piksel daha az olduğunda sayfadaki belirli öğelerin sırasını değiştirmek için jQuery kullanıyorum. 

$(document).load($(window).bind("resize", checkPosition));

function checkPosition()
{
    if($(window).width() < 767)
    {
        $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
    } else {
        $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
    }
}

Ben yaşıyorum sorun tarafından $(window).width()hesaplanan genişliği ve CSS tarafından hesaplanan genişliği aynı görünmüyor olmasıdır. Tüm $(window).width()751 olarak görünüm genişliği yani 16px farklı olduğu görülmektedir döner 767 CSS hesaplar.

Buna neyin sebep olduğunu ve sorunu nasıl çözebileceğimi bilen var mı? İnsanlar kaydırma çubuğunun genişliğinin dikkate alınmadığını ve kullanılmasının $(window).innerWidth() < 751yol olduğunu öne sürdüler . Ancak ideal olarak kaydırma çubuğunun genişliğini hesaplayan ve medya sorgumla tutarlı bir çözüm bulmak istiyorum (örneğin her iki koşul da 767 değerine göre denetleniyorsa). Çünkü tüm tarayıcıların kaydırma çubuğu genişliği 16 piksel olmayacak mı?

jquery  css  twitter-bootstrap  media-queries 
— Pattle
kaynak
1
($ ('Html').
— Width
@Vaibs_Cool Öneri için teşekkürler ama yine de aynı sonucu
— alıyorum
— Ateşleyici
Buraya cevap verin [bağlantı açıklamasını buraya girin] [1] [1]: stackoverflow.com/questions/11309859/…
— Rantiev
"Document.documentElement.clientWidth" ("$ (window) .width ()" yerine) nasıl çalışmasını istediğiniz işe yarıyor mu? Düzenleme: Benim hatam, Vaibs_Cool'un cevabını gördüm.
— joshhunt

Yanıtlar:

293

IE9'u desteklemeniz gerekmiyorsa window.matchMedia()( MDN belgeleri ) kullanabilirsiniz.

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

window.matchMediaCSS medya sorgularıyla tamamen tutarlıdır ve tarayıcı desteği oldukça iyidir: http://caniuse.com/#feat=matchmedia

GÜNCELLEME:

Daha fazla tarayıcıyı desteklemeniz gerekiyorsa, Modernizr'ın mq yöntemini kullanabilirsiniz , CSS'deki medya sorgularını anlayan tüm tarayıcıları destekler.

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}
— ausi
kaynak
8
Modernizr kütüphanesini kullanmayı göze alabiliyorsanız, buradaki en iyi cevap budur.
— richsinn
1
Bu çözüm daha iyidir: stackoverflow.com/a/19292035/1136132 (2. kod). Sadece JS.
— joseantgv
@joseantgv Benim çözümüm de sadece js. Bağlantı kurduğunuz çözümün neden daha iyi olduğunu açıklayabilir misiniz?
— ausi
2
@ edwardm Modernizr.mqyalnızca bir boole değeri döndürür, bu nedenle bunu bir onresizeolay işleyicisinde kendiniz çağırmanız gerekir .
— ausi
2
@Bernig window.matchMediaönerilen yoldur, çünkü işlevi ne sıklıkta çağırdığınıza bağlı olarak bir yeniden akış tetiklemez , bu bir performans sorununa neden olabilir. Modernizr'ı doğrudan kullanmak istemiyorsanız, kaynak kodunu src / mq.js ve src / injectElementWithStyles.js adresinden kopyalayabilirsiniz .
— ausi
175

Ortam sorgusunun değişip değişmediğini bir CSS kuralına bakın. Bunun her zaman çalışması garanti edilir.

http://www.fourfront.us/blog/jquery-window-width-and-media-queries

HTML:

<body>
    ...
    <div id="mobile-indicator"></div>
</body>

JavaScript:

function isMobileWidth() {
    return $('#mobile-indicator').is(':visible');
}

CSS:

#mobile-indicator {
    display: none;
}

@media (max-width: 767px) {
    #mobile-indicator {
        display: block;
    }
}
— kabaetler
kaynak
9
Bu, diğer cevaplarda bahsedilen JS saldırılarından daha zarif bir çözüm.
— René Roth
3
+1 Bu sadece akıllı. Kesme noktalarını değiştirmek isterseniz, tek yapmanız gereken css değil css değiştirmek.
— JoeMoe1984
Bu çözüm iyi çalışıyor ve en çok oylanan cevapta önerilen javascript kesmek daha zarif buluyorum.
— Andrés Meza-Escallón
2
Bootstrap kullanıyorsanız, css gibi yapabilirsiniz<div id="xs-indicator" class="xs-visible">
— Novamo
33

Bu kaynaklanıyor olabilir scrollbar, kullanmak innerWidthyerine widthgibi

if($(window).innerWidth() <= 751) {
   $("#body-container .main-content").remove()
                                .insertBefore($("#body-container .left-sidebar"));
} else {
   $("#body-container .main-content").remove()
                                .insertAfter($("#body-container .left-sidebar"));
}

Ayrıca viewportgibi alabilirsiniz

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

Kodun üstünde Kaynak

— Rohan Kumar
kaynak
Teşekkürler. Bu işe yarayacak ama yine de kaydırma çubuğunun genişliğini dahil etmek için jquery kullanabilirsiniz. Sadece kaydırma çubuğunun genişliğinin farklı tarayıcılarda değişebileceğini mi düşünüyorum?
— Pattle
1
Evet kullanın innerWidth()veya aşağıdaki gibi kullanabilirsiniz $('body').innerWidth();Bu stackoverflow.com/questions/8339377/…
— Rohan Kumar
3
Yani, jQuery $ (window) nesnesinde değil, window.innerWidth, $ (window) .width () yanlış döndürüyor
— EJanuszewski
1
window.innerWidthOSX sistem tercihlerinde kaydırma çubukları etkinleştirilmişse Safari 8'deki CSS medya sorgularıyla tutarlı değildir.
— ausi
10

evet, bunun nedeni kaydırma çubuğudur. Doğru cevap kaynağı: bağlantı açıklamasını buraya girin

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
— Rantiev
kaynak
4

Belgenin genişliğini JS kapsamına almamak, ancak css @media sorgusu tarafından yapılan bir çeşit değişikliği kapsamak daha iyi bir uygulamadır. Bu yöntemle JQuery işlevinin ve css değişikliğinin aynı anda gerçekleştiğinden emin olabilirsiniz.

css:

#isthin {
    display: inline-block;
    content: '';
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media only screen and (max-width: 990px) {
    #isthin {
        display: none;
    }
}

jQuery:

$(window).ready(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});

$(window).resize(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});
— gramgram
kaynak
3

Son zamanlarda aynı problemle karşı karşıyaydım - Bootstrap 3 ile de.

Ne $ .width () ne de $ .innerWidth () sizin için işe yaramaz.

Ve özellikle BS3 göre tasarlanmıştır - - Ben ile geldi en iyi çözüm
için bir genişliğini kontrol .containerelemanı.

Muhtemelen .containeröğenin nasıl çalıştığını bildiğiniz gibi, size
BS css kuralları tarafından ayarlanan geçerli genişliği verecek tek öğedir.

Yani böyle bir şey gidiyor

bsContainerWidth = $("body").find('.container').width()
if (bsContainerWidth <= 768)
    console.log("mobile");
else if (bsContainerWidth <= 950)
    console.log("small");
else if (bsContainerWidth <= 1170)
    console.log("medium");
else
    console.log("large");
— user3041539
kaynak
3

Burada daha önce bahsedilen ve CSS yoluyla bir şeyi değiştirmeye ve Javascript ile okumaya dayanan yöntemlere bir alternatif var. Bu yönteme gerek yoktur window.matchMediaveya Modernizr. Ayrıca, fazladan HTML öğesi gerektirmez. Kesme noktası bilgilerini 'depolamak' için bir HTML sözde öğesi kullanarak çalışır:

body:after {
  visibility: hidden;
  height: 0;
  font-size: 0;
}

@media (min-width: 20em) {
  body:after {
    content: "mobile";
  }
}

@media (min-width: 48em) {
  body:after {
    content: "tablet";
  }
}

@media (min-width: 64em) {
  body:after {
    content: "desktop";
  }
}

bodyÖrnek olarak kullandım , bunun için herhangi bir HTML öğesini kullanabilirsiniz. contentSözde öğenin içine istediğiniz herhangi bir dize veya sayı ekleyebilirsiniz . 'Mobil' ve benzeri olmak zorunda değildir.

Şimdi bu bilgileri Javascript'ten şu şekilde okuyabiliriz:

var breakpoint = window.getComputedStyle(document.querySelector('body'), ':after').getPropertyValue('content').replace(/"/g,'');

if (breakpoint === 'mobile') {
    doSomething();
}

Bu şekilde, kesme noktası bilgilerinin doğru olduğundan daima eminiz, çünkü doğrudan CSS'den geliyor ve Javascript aracılığıyla doğru ekran genişliğini elde etmekle uğraşmak zorunda kalmıyoruz.

— dschenk
kaynak
Kullanılacak gerekmez querySelector()ya getPropertyValue(). Normal ifadede de tek tırnak arayabilirsiniz (tutarlı olmadığı için). Bu: window.getComputedStyle(document.body, ':after').content.replace(/"|'/g, ''). Ve, biraz daha ucuz hale getirmek için, ._debounce()~ 100ms bekleme ile alt çizgi / lodash içinde sarabilirsiniz . Son olarak, <html> 'e attribs eklenmesi, çıktıyı ham bayraklar / veriler dışındaki değişkenler arayan araç ipucu devre dışı cümleleri gibi diğer şeyler için kullanılabilir hale getirir. Örnek: gist.github.com/dhaupin/f01cd87873092f4fe2fb8d802f9514b1
— dhaupin
2

Javascript, görünüm alanı genişliğini kontrol etmek için birden fazla yöntem sağlar. Fark ettiğiniz gibi, innerWidth araç çubuğu genişliğini içermez ve araç çubuğu genişlikleri sistemler arasında farklılık gösterir. Araç çubuğu genişliğini içerecek dışWidth seçeneği de vardır . Mozilla JavaScript API durumları:

Window.outerWidth, tarayıcı penceresinin dışının genişliğini alır. Kenar çubuğu (genişletilmişse), pencere kromu ve kenarlıkları / tutamaçları yeniden boyutlandıran tarayıcı penceresinin tümünün genişliğini temsil eder.

Javascript'in durumu, her platformdaki her tarayıcıda externalWidth için belirli bir anlama güvenemeyeceği şekildedir.

outerWidtholduğu iyi desteklenmemektedir eski mobil tarayıcılar o büyük masaüstü tarayıcılar arasında destek ve en yeni akıllı telefon tarayıcıları sahiptir olsa.

Ausi'nin işaret matchMediaettiği gibi, CSS daha iyi standartlaştırıldığı için mükemmel bir seçim olacaktır (matchMedia, CSS tarafından algılanan görünüm değerini okumak için JS kullanır). Ancak kabul edilen standartlarda bile, onları görmezden gelen gecikmiş tarayıcılar hala mevcuttur (bu durumda IE <10, bu da matchMedia'yı en azından XP ölene kadar çok kullanışlı hale getirmez).

Gelen Özetle sadece masaüstü tarayıcılar ve yeni mobil tarayıcılar için gelişmekte yerse, outerWidth sizinle, aradığınızı size vermelidir bazı uyarılar .

— fzzylogic
kaynak
1

İşte medya sorguları ile ilgilenmek için daha az hile. Çapraz tarayıcı desteği, mobil IE'yi desteklemediğinden biraz sınırlayıcıdır.

     if (window.matchMedia('(max-width: 694px)').matches)
    {
        //do desired changes
    }

Daha fazla ayrıntı için Mozilla belgelerine bakın.

— user2128205
kaynak
1

bunu dene 

getData(){
    if(window.innerWidth <= 768) {
      alert('mobile view')
      return;
    }

   //else function will work

    let body= {
      "key" : 'keyValue'
    }
    this.dataService.getData(body).subscribe(
      (data: any) => {
        this.myData = data
      }
    )
}
— DINESH Adhikari
kaynak
0

Her zaman çalışan ve CSS medya sorgularıyla senkronize edilen geçici çözüm.

Gövdeye div ekle

<body>
    ...
    <div class='check-media'></div>
    ...
</body>

Stil ekleyin ve belirli bir medya sorgusuna girerek bunları değiştirin

.check-media{
    display:none;
    width:0;
}
@media screen and (max-width: 768px) {
    .check-media{
         width:768px;
    }
    ...
}

Ardından, JS sorgusunda medya sorgusuna girerek değiştirdiğiniz stil

if($('.check-media').width() == 768){
    console.log('You are in (max-width: 768px)');
}else{
    console.log('You are out of (max-width: 768px)');
}

Böylece genellikle belirli bir medya sorgusuna girerek değiştirilen herhangi bir stili kontrol edebilirsiniz.

— Arsen Pyuskyulyan
kaynak
0

En iyi çapraz tarayıcı çözümü Modernizr.mq kullanmaktır

bağlantı: https://modernizr.com/docs/#mq

Modernizr.mq, geçerli tarayıcı penceresi durumunun bir medya sorgusuyla eşleşip eşleşmediğini program aracılığıyla denetlemenizi sağlar.

var query = Modernizr.mq('(min-width: 900px)');
if (query) {
   // the browser window is larger than 900px
}

Not Tarayıcı medya sorgularını (ör. Eski IE) desteklemez mq her zaman false değerini döndürür.

— Sanjib Debnath
kaynak
0 
if(window.matchMedia('(max-width: 768px)').matches)
    {
        $(".article-item").text(function(i, text) {

            if (text.length >= 150) {
                text = text.substring(0, 250);
                var lastIndex = text.lastIndexOf(" ");     
                text = text.substring(0, lastIndex) + '...'; 
            }

            $(this).text(text);

        });

    }
— Adam Colton
kaynak
0

Ne yaptığım ;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
...

ve daha sonra herhangi bir yere aWidth değişkenini çağırın.

Kaydırma çubuğu genişliğinin sayıldığından emin olmak için getWidth () öğesini belge gövdesine koymanız gerekir; aksi takdirde tarayıcının getWidth () öğesinden çıkarılan kaydırma çubuğu genişliği.

— burkul
kaynak
-1

Uygulama kaygan kaydırma çubuğu ve çözünürlüğe bağlı olarak blokta farklı sayıda slayt görüntüleme (jQuery)

   if(window.matchMedia('(max-width: 768px)').matches) {
      $('.view-id-hot_products .view-content').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: true,
      });
    }

    if(window.matchMedia('(max-width: 1024px)').matches) {
      $('.view-id-hot_products .view-content').slick({
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 4,
        dots: true,
      });
    }
— vitalii
kaynak
-2

Bunu dene 

if (document.documentElement.clientWidth < 767) {
   // scripts
}

Daha fazla referans için buraya tıklayın

— Vaibs_Cool
kaynak
Teşekkürler, bunun yine de aynı sonucu var
— Pattle
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.