Viewing Media Queries in Browser
# March 14, 2013 at 12:32 pm
This is probably an easy fix but was wondering why my sites size wont degrade to a mobile width when I make my chrome window as small as it can go. I am using
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
in my media.css file
as well as
meta name="viewport" content="width=device-width, target-densitydpi=high-dpi"
in my index.php file.
When I view the site on my iphone it degrades as it should, but for developing in the browser, it wont resize. Thanks everyone.
Craig# March 14, 2013 at 12:36 pm
I’m no expert but my guess is that ‘min-device-pixel-ratio’ is something not supported by **desktop** screens.
Aren’t they…erm….1.0?# March 14, 2013 at 5:34 pm
Unless you’re working on a Macbook Pro (if no mistake), your screen isn’t a retina display. Its pixel ratio is 1. Not 1.5. Not 2. Not more. Simply 1.
Your media query (even if it’s uncomplete as @paulie_d said) doesn’t target mobile devices. It targets retina displays, including a bunch of recent mobile devides and also latest Macbook Pro.
If you want to target mobile devices, you’d better try checking for the device width in the media query, not the pixel ratio.
You can also do both, but not for the same things. Check the device size to change the layout. Check the pixel ratio to load high quality graphics.
You must be logged in to reply to this topic.