The other day, while I was creating media queries for a website I was working on, in order to make it responsive on all screen sizes, I made a noob's mistake. Something you may have run across before or maybe didn't. I ended up with a website that was in fact responsive on all screen sizes, however, there was one problem.
The website didn't really get affected by media queries at all if I resized the browser menu.
"And why is this a problem ?", you may ask... Well, if someone were to view that website, the first thing they do is look at how pretty it is, the second thing is to check whether it is responsive or not by resizing the window. They won't bother checking it on all devices, would they ?
It was driving me insane, until I figured it out. I was using the wrong attribute for the media query. Well, not exactly, it was a correct attribute, but it was the reason why this happened. But why did this happen exactly ?
Well, the reason it happened could be easily determined by reading the names of both attributes. As their names imply:
max-width is directly related to the width of the viewport, while max-device-width is directly related to the width of the display of the device on which the website is being viewed.
You might ask, "Then why don't we always use max-width ?".
And that's a good question, which also has a good answer, and that is: "We actually should.". But Why ?
The reason is quite simple actually, aside from people checking whether your website is responsive or not by simply resizing the window, there are actually other important reasons. The first one is the huge amounts of devices out there with various screen sizes and the ability switch orientations. This one alone is enough of a reason not to use max-device-width, unless you want to end up with a website that looks weird on some devices and even weirder on others.
And the biggest reason why, is that screen resolutions have been boosted quite a bit lately and people with 4k displays most likely will be using them to multi-task. Or in other words, they would have multiple windows open at the same time and resized and placed next to other windows, creating a beautiful mosaic. But if you used max-device-width, you would definitely ruin that mosaic they were trying to create. The website would look awful and would most likely have a horizontal scroll bar ( I hate them. ).
The last reason however, is that some devices even report wrong display width values, and this could lead to the wrong media query to be triggered. So what do we learn from this ?
A quite simple lesson: Forget about max-device-width.
I hope that you enjoyed this post. I personally enjoyed writing it quite a lot.
If you happen to find any mistakes in this post, feel free to correct me in the comments. Life is a never ending classroom afterall. :)