CSS मीडिया क्वेरी और जावास्क्रिप्ट खिड़की चौड़ाई

Question

मेल नहीं खाते एक संवेदनशील टेम्पलेट के लिए, मैं अपने सीएसएस में एक मीडिया प्रश्न हैं:

@media screen and (max-width: 960px) { 
body{ 
/* something */ 
background:red; 
} 
} 

और, मैं चौड़ाई लॉग इन करने के आकार पर एक jQuery समारोह बनाया:

$(window).resize(function() { 
console.log($(window).width()); 
console.log($(document).width()); /* same result */ 
/* something for my js navigation */ 
} 

और सीएसएस का पता लगाने और जे एस परिणाम के साथ एक अंतर है, मैं इस मेटा है: अनुसूचित जाति की वजह से

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/> 

मुझे लगता है यह है रोलबार (15 पीएक्स)। मैं इसे बेहतर कैसे कर सकता हूं?

Answer 1

आप स्क्रॉल बार के बारे में सही हैं, ऐसा इसलिए है क्योंकि सीएसएस डिवाइस की चौड़ाई का उपयोग कर रहा है, लेकिन जेएस दस्तावेज़ चौड़ाई का उपयोग कर रहा है।

आपको जो करना है वह jQuery जेएस फ़ंक्शन का उपयोग करने के बजाय आपके जेएस कोड में व्यूपोर्ट चौड़ाई को मापना है। http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

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

Answer 2

से मेरा अनुभव था कि मीडिया क्वेरी चौड़ाई पटरियों document.body.clientWidth

इस कोड है। एक लंबवत स्क्रॉल बार आने और जाने के कारण, विंडो की ऊंचाई के आधार पर मीडिया क्वेरी नियम बदलने के बाद, मेरी जावास्क्रिप्ट देर से चलने का कारण बन सकता है।

document.body.clientWidth की जांच करने से मीडिया स्क्रिप्ट नियम प्रभावी होने पर एक ही समय में मेरे स्क्रिप्ट कोड को निष्पादित करने की अनुमति दी गई।

@media (न्यूनतम-चौड़ाई: 873px) {
        // कुछ नियम
}
...

अगर (document.body.clientWidth> = 873) {
        // कुछ कोड
}

एंडी लैंगटन कोड ने मुझे इस पर रखा - धन्यवाद!

Answer 3

मैं http://www.w3schools.com/js/js_window.asp पर निम्नलिखित कोड मिला:

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 

व्यावहारिक रूप से इसके @Michael बर्ड के जवाब में उत्तर के रूप में एक ही तरह से काम कर रहा है, लेकिन यह अधिक पढ़ने के लिए आसान है।

संपादित करें: मैं सीएसएस मीडिया प्रश्नों के लिए उपयोग की जाने वाली बिल्कुल चौड़ाई देने के लिए एक विधि की तलाश में था। लेकिन सुझाया गया एक स्क्रॉलबार के साथ सफारी पर सही काम नहीं करता है, क्षमा करें। मैं एक केंद्रीय समारोह में modernizr.js का उपयोग करके समाप्त हुआ और शेष कोड में मैं बस जांचता हूं कि प्रदर्शन प्रकार मोबाइल, टैबलेट या डेस्कटॉप है या नहीं।मैं चौड़ाई में कोई दिलचस्पी नहीं है, यह मेरे लिए ठीक काम करता है:

getDisplayType = function() { 
    if (Modernizr.mq('(min-width: 768px)')){ 
    return 'desktop'; 
    } 
    else if (Modernizr.mq('(min-width: 480px)')){ 
    return 'tablet' 
    } 
    return 'mobile'; 
}; 

Answer 4

हाय मैं इस छोटे चाल का उपयोग उत्तरदायी पृष्ठों पर आसानी से एक साथ जे एस और सीएसएस काम पाने के लिए:

टेस्ट एक तत्व की दृश्यता सीएसएस @ मिडिया आकार की स्थिति पर प्रदर्शित या नहीं। बूटस्ट्रैप सीएसएस का उपयोग करते हुए मैं एक छिपा-XS वर्ग तत्व की दृश्यता

var msg = "a message for U"; 
 

 
/* At window load check initial size */ 
 
if ($('#test-xsmall').is(':hidden') ) { 
 
    /* This is a CSS Xsmall situation ! */ 
 
    msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! "; 
 
    $('.redthing-on-xsmall').addClass('redthing').html(msg); 
 

 
} else { 
 
    /* > 768px according to CSS */ 
 
    msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! "; 
 
    $('.redthing-on-xsmall').removeClass('redthing').html(msg); 
 
} 
 

 

 
/* And again when window resize */ 
 

 
$(window).on('resize', function() { 
 
    if ($('#test-xsmall').is(':hidden')) { 
 
    msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! "; 
 
    $('.redthing-on-xsmall').addClass('redthing').html(msg); 
 
    } else { 
 
    msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! "; 
 
    $('.redthing-on-xsmall').removeClass('redthing').html(msg); 
 
    } 
 
});

@media (min-width: 768px) { 
 
    .hidden-xs { 
 
    display: block !important; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .hidden-xs { 
 
    display: none !important; 
 
    } 
 
} 
 
.redthing-on-xsmall { 
 
    /* need a scrollbar to show window width diff between JS and css */ 
 
    min-height: 1500px; 
 
} 
 
.redthing { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- the CSS managed Element that is tested by JS --> 
 
<!-- class hidden-xs hides on xsmall screens (bootstrap) --> 
 

 
<span id="test-xsmall" class="hidden-xs">THIS ELEMENT IS MANAGED BY CSS HIDDEN on @media lower than 767px</span> 
 

 

 
<!-- the responsive element managed by Jquery --> 
 
<div class="redthing-on-xsmall">THIS ELEMENT IS MANAGED BY JQUERY RED on @media max width 767px </div>

Answer 5

वर्कअराउंड कि हमेशा काम करता है और CSS मीडिया क्वेरी के साथ समन्वयित है का परीक्षण करें।

शरीर के लिए एक div जोड़े

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

शैली जोड़ें और उन्हें जे एस जांच शैली है कि आप मीडिया क्वेरी में दर्ज करके बदल रहे हैं में

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

फिर विशिष्ट मीडिया क्वेरी में दर्ज करके बदल

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

तो आम तौर पर आप किसी भी शैली की जांच कर सकते हैं जिसे spec में दर्ज करके बदला जा रहा है ific मीडिया क्वेरी।

Answer 6

window.innerWidth आपको जो चाहिए वह है।

अगर (window.innerWidth < 768) सीएसएस में 768 को तोड़ने बिंदु के लिए काम करता

Answer 7

CSS मीडिया क्वेरी window.innerWidth के बराबर है। सीएसएस मीडिया क्वेरीज़ स्क्रॉलबार की गणना भी करता है।