Menu
How Do You Use Media Queries With jQuery. Media queries will be checking the width of the window to see what the size of the device is so you would think that you can use a method like . width() on the window object like this.
Take a look: @media only screen and (min-width: 360px) and (max-width: 768px) { // do something in this width range. } The media query above will only work for the feature expression (the screen size of the mobile device that you're writing a style for) provided above.
If you are designing your website for smaller devices first then set your default CSS breakpoints with min-width and adjust for larger devices accordingly. Meanwhile, if you are designing for larger devices first then use max-width and then tune for smaller devices accordingly.
If you don't have to support IE9 you can just use window.matchMedia() (MDN documentation).
function checkPosition() {
if (window.matchMedia('(max-width: 767px)').matches) {
//...
} else {
//...
}
}
window.matchMedia is fully consistent with the CSS media queries and the browser support is quite good: http://caniuse.com/#feat=matchmedia
If you have to support more browsers you can use Modernizr's mq method, it supports all browsers that understand media queries in CSS.
if (Modernizr.mq('(max-width: 767px)')) {
//...
} else {
//...
}
Check a CSS rule that the media query changes. This is guaranteed to always work.
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;
}
}
It may be due to scrollbar, use innerWidth instead of width like
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"));
}
Also you can get the viewport like
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' ] };
}
Above code Source
yes, that's due to scrollbar. Right answer source: enter link description here
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' ] };
}
It's maybe a better practice not to JS-scope the document's width but some sort of change made by css @media query. With this method you can be sure the JQuery function and css change happens at the same time.
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");
...
});
Use
window.innerWidth
This solved my problem
I was facing the same problem recently - also with Bootstrap 3.
Neither $.width() nor $.innerWidth() will work for you.
The best solution I came up with - and is specifically tailored to BS3 -
is to check the width of a .container element.
As you probably know how the .container element works,
it's the only element that will give you the current width set by BS css rules.
So it goes something like
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");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With