Last Updated: August 05, 2021
·
9.662K
· georgiee

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

8 Responses
Add your response

Nice :)

over 1 year ago ·

Sometimes you just don't need to apply a mobile layout to a desktop browser. In this case you SHOULD use min-device-width.

over 1 year ago ·

Or.... Use min-width for development; convert to min-device-width before your code goes live.

over 1 year ago ·

Where's the thumbs down button?

over 1 year ago ·

Ctrl + F -> "-device" -> Replace All with ""

Plus testing in a browser is never as good as on the real thing.

over 1 year ago ·

@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!

over 1 year ago ·

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

over 1 year ago ·

// BootStrap
Search "min-device-width" (0 hits in 0 files)

over 1 year ago ·