I was looking into this a few years back. In short, you can’t do this with 100% reliability. There seem to be 2 approaches commonly used to provide a ‘best-guess’: 1. User Agent Detection This is where you check what the client is claiming to be. e.g. if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { // is mobile.. … Read more
Bootstrap 5 (update 2023) As stated in the docs, For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class. Bootstrap 4 (update 2018) Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-* classes: <nav class=”navbar fixed-top navbar-expand-sm”>..</nav> navbar-expand-sm = mobile … Read more
There are a lot of medias out there, and if you want to select only by its properties, use the all keyword: @media all and (max-width:480px) { /* Styles */ } Edit: Combine rules with or: @media all and (prop1:val1), all and (prop2:val2) { /* Styles */ } Combine rules with and: @media all and … Read more
If you are using Compass, you can easily specify the precision in your project file (config.rb) without hacking the core: Sass::Script::Number.precision = 8 For more information see Sass documentation
You can use $(window).width() if($(window).width() >= 1024){ // do your stuff } Demo —> http://jsfiddle.net/fh2eC/1/
Both srcset and picture do approximately the same thing, but there is a subtle difference: picture dictates what image the browser should use, whereas srcset gives the browser a choice. A lot of things can be used to select this choice like viewport size, users preferences, network condition and so on. Hopefully in the future … Read more
Stylesheets are always downloaded, regardless of the current media, whether it be screen, print, or 3D-glasses. See: Why do all browsers download all CSS files – even for media types they don’t support? So with that in mind, keeping them all in one stylesheet will reduce http requests, where as separate stylesheets will always create … Read more
You can make the chart resize using a combination of viewBox and preserveAspectRatio attributes on the SVG element. See this jsfiddle for the full example: http://jsfiddle.net/BTfmH/12/ var svg = d3.select(‘.chart-container’).append(“svg”) .attr(“width”, ‘100%’) .attr(“height”, ‘100%’) .attr(‘viewBox’,’0 0 ‘+Math.min(width,height)+’ ‘+Math.min(width,height)) .attr(‘preserveAspectRatio’,’xMinYMin’) .append(“g”) .attr(“transform”, “translate(” + Math.min(width,height) / 2 + “,” + Math.min(width,height) / 2 + “)”); You … Read more
Make sure you add: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> to your <head>. I had a similar problem and I mistakenly thought it was just a matter of viewport width. Update: check out @NicolasBADIA answer for a more complete version.
The @media query specifically for ‘phones’ is.. @media (max-width: 480px) { … } But, you may want to remove the padding/margin for any smaller screen sizes. By default, Bootstrap adjusts margins/padding to the body, container and navbars at 978px. Here are some queries that have worked (in most cases) for me: @media (max-width: 978px) { … Read more