SORU
10 EKİM 2013, PERŞEMBE

(pencere)$.() genişliği ortam olarak aynı sorgu değil

Bir proje üzerinde Twitter Bootstrap kullanıyorum. De varsayılan bootstrap stilleri olarak da ben de bazı eklemeler yaptım

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

Ayrıca bir WordPress kullanmak alanının genişlik 767px daha az olduğunda sayfasındaki belirli öğelerin sırasını değiştirmek için 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"));
    }
}

Yaşıyorum sorun genişliği $(window).width() ve genişliğini CSS ile hesaplanan hesaplanan aynı görünmüyor. $(window).width() 767 döndüğünde, css 16px farklı gözüküyor yani 751 olarak görünüm penceresi genişliğini hesaplar.

Herkes bu neden ne ve ben sorunu çözmek nasıl biliyor mu? İnsanlar kaydırma çubuğu genişliğini düşünürsek içine atılıyor değil mi ettiler ve $(window).innerWidth() < 751 kullanarak gitmek için bir yoldur. Ancak ideal ben kaydırma çubuğu genişliğini hesaplar ve medya sorgu (e) ile uyumlu bir çözüm bulmak istiyorum her iki durum değeri 767 karşı kontrol yerini g). Çünkü kesinlikle tüm tarayıcılar 16px kaydırma çubuğu genişliği olacak?

CEVAP
25 Ocak 2014, CUMARTESİ

Bu değişiklikler, medya sorgu CSS kuralı kontrol edin. Bu her zaman işe garanti veriyor.

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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
DVJqueryTwitter-BootstrapCssMedya Sorgu CssTwitter-bootstrap

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Huot Media

    Huot Media

    7 Mayıs 2010
  • MobileTechReview

    MobileTechRe

    6 HAZİRAN 2008
  • Tom Megalis

    Tom Megalis

    18 NİSAN 2006

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR