You can get the device screen width via the screen.width property. Sometimes it’s also useful to use window.innerWidth (not typically found on mobile devices) instead of screen width when dealing with desktop browsers where the window size is often less than the device screen size. Typically, when dealing with mobile devices AND desktop browsers I … Read more
There is actually a property for this in the CSS4 media query draft. The ‘pointer’ media feature is used to query about the presence and accuracy of a pointing device such as a mouse. If a device has multiple input mechanisms, it is recommended that the UA reports the characteristics of the least capable pointing … Read more
This is simply not possible. Since the trigger @media screen and (max-width: 1170px) happens on the client-side. Achieving your expected result would only be possible if SASS grabbed all rules and properties in your stylesheet containing your $base_width variable and copied/changed them accordingly. Since it won’t work automatically you could do it by hand like … Read more
Rather than try to target @media rules at specific devices, it is arguably more practical to base them on your particular layout instead. That is, gradually narrow your desktop browser window and observe the natural breakpoints for your content. It’s different for every site. As long as the design flows well at each browser width, … Read more
css3-mediaqueries-js is probably what you are looking for: this script emulates media queries. However (from the script’s site) it “doesn’t work on @imported stylesheets (which you shouldn’t use anyway for performance reasons). Also won’t listen to the media attribute of the <link> and <style> elements”. In the same vein you have the simpler Respond.js, which … Read more
Bootstrap 5 Media Queries and Breakpoints // X-Small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { … } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { … } // … Read more
Yes, you can. @supports (-webkit-touch-callout: none) { /* CSS specific to iOS devices */ } @supports not (-webkit-touch-callout: none) { /* CSS for other than iOS devices */ } YMMV. It works because only Safari Mobile implements -webkit-touch-callout: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout Please note that @supports does not work in IE. IE will skip both of the above … Read more
You need to switch your values: /* No less than 400px, no greater than 900px */ @media (min-width:400px) and (max-width:900px) { .foo { display:none; } } Demo: http://jsfiddle.net/xf6gA/ (using background color, so it’s easier to confirm)
CSS to detect screen orientation: @media screen and (orientation:portrait) { … } @media screen and (orientation:landscape) { … } The CSS definition of a media query is at http://www.w3.org/TR/css3-mediaqueries/#orientation
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 UPDATE: If you have to support more browsers you can … Read more