DO NOT USE min-device-width in media queries
Well, to be more specific.
Just found out why some people in my company complained about "the work of the freelancer looks different on my mobiel device than in the resized browser window.
Our stupid freelancer (this is part 3) used min-device-width through all of this media queries. This is simply stupid as you can`t test it locally if your resolution is higher.
so do not use this
@media screen and (min-device-width : 1024px)
rather use this
@media screen and (min-width : 1024px)
if you have not a reason for using the device option
Written by George
Related protips
8 Responses
Nice :)
Sometimes you just don't need to apply a mobile layout to a desktop browser. In this case you SHOULD use min-device-width.
Or.... Use min-width for development; convert to min-device-width before your code goes live.
Where's the thumbs down button?
Ctrl + F -> "-device" -> Replace All with ""
Plus testing in a browser is never as good as on the real thing.
@kevingaudin thanks for your reply. This is the one and only scenario which requires the use of the device option- I mentioned it in my last sentence.
All you other guy who don`t like my comment. Sorry. It was a kind of mental valve as I have to continue a whole project from a freelancer who did his job without any passion. This device thing was only the tip of the iceberg.
Have a nice day!
Using sass or another css preprocessor you can have different _config.scss files (or a script that extracts some values from another config file) and within this define a $mq-width-type variable which is then used whenever you want to define a media query. simply set it to 'width' on dev and 'device-width' on prod
// BootStrap
Search "min-device-width" (0 hits in 0 files)
