Menu
With CSS media queries you can use max-device-width to target a device width (such as an iPhone or Android device) and/or a max-width that targets a page width.
If you use max-device-width, when you change the size of the browser window on your desktop, the CSS won't change, because your desktop doesn't change size.
If you use max-width, when you change the size of the browser window on your desktop, you might be shown mobile-orientated styling, such as touch-friendly elements and menus and that kind of thing.
Targeting specific browsers (and devices?) is now deprecated and you should be a little more agnostic with what you target. Does that apply to media queries too?
Why would you target one over the other? Which one is the recommended one?
This is an example of a media query I use on a production website:
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {
/* Change a menu to fit the screen better, etc... */
}
I tend to use both max-device-width and max-width.
565
max-width is the width of the target display area, e.g. the browser; max-device-width is the width of the device's entire rendering area, i.e. the actual device screen.
This is a simple way to put it: if the element would render wider than the max-width says it should be, then the max-width property wins over the width property. But if it would render less than the max-width says, then the width property wins. In mathematical terms: if width > max-width; let the browser use max-width.
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.
1280px and 1920px are the two standard widths for web design. A 1280px website will look great on laptops and mobile devices but not so great on large monitors. To ensure your site looks just as good on big screens as it does on small screens, set your max site width to 1920px or more.
If you're making a responsive website, use min-width/max-width in your media queries rather than min-device-width/max-device-width in order to target a wider range of screen sizes.
According to the 2018 Media Queries Level 4 specification draft, the device-width media feature is deprecated. It will be kept for backward compatibility, but should be avoided.
8. Appendix A: Deprecated Media Features
To query for the size of the viewport (or the page box on page media), the
width,heightandaspect-ratiomedia features should be used, rather thandevice-width,device-heightanddevice-aspect-ratio, which refer to the physical size of the the device regardless of how much space is available for the document being laid out. Thedevice-*media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.
As a side note, remember to specify a viewport meta tag in the <head> section of your document:
<meta name="viewport" content="width=device-width, initial-scale=1">
Due to all the different possible screen resolutions and pixel densities a given device can have, a pixel is not a pixel because there are several things to take into consideration (zoom, pixel density, screen resolution and size, device orientation, aspect ratio, etc..). In this case, a pixel is actually referred to as a "optical reference unit" rather than a physic hardware pixel.
Fortunately, you can specify a viewport meta tag in the <head> section of your document in order to control the width and scaling of the browser's viewport. If this tag has a content value of width=device-width, the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.
<meta name="viewport" content="width=device-width, initial-scale=1">
In terms of media queries, you will probably want to use max-width rather than max-device-width, since max-width will target the viewport (current browser window), whereas max-device-width will target the device's actual full screen size/resolution.
In other words, if you are using max-device-width, you will not see different media queries applied when resizing your desktop browser, because unlike max-width, only the device's actual full screen size is taken into consideration; not the current size of the browser window.
This makes a huge difference if you're trying to create an adaptive layout because the site won't be responsive when resizing the browser. In addition, if you're using max-device-width the media queries you're using to target devices with smaller screens will not apply to desktops even when resizing the browser window down to match said smaller screen size.
As of 2018, the latest media query specification draft has actually deprecated the device-width media feature, therefore it should be avoided.
In addition, this article on Google Developers highly discourages the usage of max-device-width:
Google Developers - Web Fundamentals - Responsive CSS media queries
It is also possible to create queries based on
*-device-width; though this practice is strongly discouraged.The difference is subtle but very important:
min-widthis based on the size of the browser window, whereasmin-device-widthis based on the size of the screen. Unfortunately some browsers, including the legacy Android browser may not report the device width properly and instead report the screen size in device pixels instead of the expected viewport width.In addition, using
*-device-widthcan prevent content from adapting on desktops or other devices that allow windows to be resized because the query is based on the actual device size, not the size of the browser window.
99
Avoid device-width. The reason is you can't know how the users browsers respond to it.
For IOS, it seems to be simple, at least with Safari. It seems to be one single device-width response independent of orientation. Also, device-width is stated only for the shorter side of the device. I did test this on iPhone 4S and iPad. They did respond to 320 and 768 respectively no matter what orientation.
For Android it's more unpredictable. I tested six browsers on a Huawei Ascend Y330 (Android default browser, Chrome, Opera, Firefox, Firefox Beta, Dolphin). The response vary depending on browser type and orientation.
I tested on a page with query (max-device-width: ***px) and to find out what px-value I need to fill in to get the query in a true state. Four different values were needed (320, 480, 534, 800) depending on browser type and orientation. This makes device-width unusable.
6
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
