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

  • BeginnersTech

    BeginnersTec

    8 NİSAN 2011
  • boniver

    boniver

    17 NİSAN 2006
  • The Warp Zone

    The Warp Zon

    24 AĞUSTOS 2007

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR