@jedaisoul, max-device-width is still window width, that's not what it means. It means don't lie about the width, which is why you'll see this META a lot:
content="width=device-width; height=device-height; initial-scale=1.0"
So that mobile browsers don't lie about the browser window area.
You can test that with a max-height media query, you'll find it subtracts the address bar and any other stuff from it, which can at the right height on both Android and iOS result in a layout that constantly jumps between two layouts since when you scroll they typically hide the address bar triggering the query, which makes enough room to un-trigger the query endlessly.
Basically "device-width" is the physical resolution of the window, "width" is the resolution the browser feels like reporting -- which is why a LOT of 480px wide screens will without that meta report "width" as 800px. It's why a lot of 1920px or higher screens (like Apple retina) will lie about "width" and report half their actual resolution -- hence the META above to tell them to "STOP DOING THAT, WE KNOW WHAT WE'RE DOING!"
They do this because most websites are NOT designed for mobile, so they try to mash crappy designs into working... which... doesn't really work.