This repository has been archived by the owner on Aug 10, 2022. It is now read-only.
Advise users never to use device-width media queries #20
Milestone
Comments
pp-koch
changed the title
Issue in: /documentation/multi-device-layouts/rwd-fundamentals/index.html
Advise users never to use device-width media queries
Apr 30, 2014
Thanks @pp-koch! I'll update and strengthen in the next update. |
@petele hey dude, did you get around to this. |
gauntface
pushed a commit
that referenced
this issue
Nov 15, 2017
# This is the 1st commit message: Adding start of Workbox v3 alpha docs # This is the commit message #2: Adding v3 alpha # This is the commit message #3: Adding configuration guide # This is the commit message #4: Adding workbox-precaching and fixing nested parameters # This is the commit message #5: Setting up namespaced docs on WF # This is the commit message #6: Adding ref and module docs for precaching # This is the commit message #7: Adding ref and module docs for precaching # This is the commit message #8: Routing Docs and module guide # This is the commit message #9: Routing Docs and module guide # This is the commit message #10: Adding workbox-cache-expiration guide and reference docs # This is the commit message #11: Adding routing docs # This is the commit message #12: Changing menu name # This is the commit message #13: Adding ability to use custom project yaml # This is the commit message #14: Adding workbox pages # This is the commit message #15: Getting it to work on devsite staging # This is the commit message #16: Adding some headings instead of sections but need to stage # This is the commit message #17: Moving to heading # This is the commit message #18: Adding heading support for navigation # This is the commit message #19: Adding contributor list # This is the commit message #20: Adding more content for docs # This is the commit message #21: Adding in company logos # This is the commit message #22: Adding in company logos # This is the commit message #23: Adding logos # This is the commit message #24: Adding some fixes for left nav # This is the commit message #25: Renaming strategies # This is the commit message #26: Fixng ref doc bug and add missing module pages # This is the commit message #27: Adding Guides etc
This was referenced Mar 11, 2020
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
"
A note on min-device-width
In addition to *-width, it is also possible to create queries based on *-device-width; the difference is subtle but very important. min-width is based on the size of the browser window, where as min-device-width is based on the size of the screen.
"
Much worse, actually. In some browsers, including Android WebKit, it's the screen size in device pixels. In other browsers, including Chrome, it's the size of the ideal viewport (the one you get with width=device-width). So you'll never know what you'll get.
See also http://www.quirksmode.org/blog/archives/2013/11/screenwidth_is.html , which is about screen.width/height, but device-width/height is ALWAYS, in all 50 browsers I tested, equal to screen.width/height, so the conclusions are valid in this case as well.
Advise users NEVER to use device-width/height.
The text was updated successfully, but these errors were encountered: