What is the difference between max-device-width and max-width for mobile web?
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
Same goes for max-height
and max-device-height
naturally.
Should I use max-device-width or max-width?
TL;DR
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
,height
andaspect-ratio
media features should be used, rather thandevice-width
,device-height
anddevice-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">
Explanation
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-width
is based on the size of the browser window, whereasmin-device-width
is 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-width
can 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.
Further Reading:
- Quirksmode.org - A pixel is not a pixel is not a pixel
- W3 - Media Queries Level 4 Specification
- Google Developers - Web Fundamentals - Viewport
- Google Developers - Web Fundamentals - Responsive CSS media queries
- MDN - Using the viewport meta tag to control layout on mobile browsers
Max-Width vs. Min-Width
It really depends on how your stylesheet works. For example:
@media screen and (min-width:100px) {
body { font-weight:bold; }
}
@media screen and (min-width:200px) {
body { color:#555; }
}
The above two media queries would make the body
font bold if the screen is greater than or equal to 100px, but also make the color #555
if it's greater than or equal to 200px;
Another example:
@media screen and (max-width:100px) {
body { font-weight:bold; }
}
@media screen and (max-width:200px) {
body { color:#555; }
}
Unlike the first example, this makes the body
font bold and color #555
only if the screen width is between 0 and 100px. If it's between 0px and 200px it will be color #555
.
The beauty of media queries is that you can combine these statements:
@media screen and (min-width:100px) and (max-width:200px) {
body { font-weight:bold; color:#555; }
}
In this example you are only targeting devices with a width between 100px and 200px - nothing more, nothing less.
In short, if you want your styles to leak out of media queries you'd use either min-width
or max-width
, but if you're wanting to affect a very specific criteria you can just combine the two.
@Media min-width & max-width
I've found the best method is to write your default CSS for the older browsers, as older browsers (including IE 5.5, 6, 7 and 8) can't read @media
. When I use @media
, I use it like this:
<style type="text/css">
/* default styles here for older browsers.
I tend to go for a 600px - 960px width max but using percentages
*/
@media only screen and (min-width: 960px) {
/* styles for browsers larger than 960px; */
}
@media only screen and (min-width: 1440px) {
/* styles for browsers larger than 1440px; */
}
@media only screen and (min-width: 2000px) {
/* for sumo sized (mac) screens */
}
@media only screen and (max-device-width: 480px) {
/* styles for mobile browsers smaller than 480px; (iPhone) */
}
@media only screen and (device-width: 768px) {
/* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
</style>
But you can do whatever you like with your @media
. This is just an example of what I've found best for me when building styles for all browsers.
iPad CSS specifications.
Also! If you're looking for printability you can use @media print{}
.
What's the difference between the media queries max-width and max-device-width?
check this post. http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
CSS Different between (max-width:320px) and (max-device-width:320px)
If you would Google or search on Stackoverflow, you would find this page:
What is the difference between max-device-width and max-width for mobile web?
Look what it says to you:
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
Same goes for max-height
and max-device-height
naturally.
Responsive Design: max-device-width, max-width and min-device-pixel-ratio
Hidpi only means that 1 css pixel is rendered with 3x3 actual pixels (this varies for devices, iPhone pixel density is 2- so on iPhone 1 css pixel is made from 4 actual LCD pixels.). Websites on galaxy s4 are still rendered as 360x640px with pixel density 3, so you don't need any additional css for HiDPI devices.
you only need to add this meta tag in year head section
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
and apply css as for regular non HiDPI device.
Related Topics
How to Word-Wrap Long Words in a Div
Format Text in a ≪Textarea≫
How to Add a Scrollbar to an Html5 Table
Font Awesome Not Working, Icons Showing as Squares
How to Style the Html5 Form Validation Error Messages With Css
Is There a "Previous Sibling" Selector
Align Inline-Block Divs to Top of Container Element
Transitions on the CSS Display Property
How to Transition Height: 0; to Height: Auto; Using Css
How to Disable Text Selection Highlighting
Transparent Text Cut Out of Background
Use of Xsl-Fo, Css3 Instead of Css2 to Create Paginated Documents Like Pdf
Prevent Content from Expanding Grid Items
Detect If an Input Has Text in It Using CSS - on a Page I Am Visiting and Do Not Control