Viewing Media Queries in Browser

[cpk33]

Hello All,

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

@media

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

[Paulie_D]

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?

https://css-tricks.com/snippets/css/retina-display-media-query/

[cpk33]

Yea I was fooling with that… What I’m trying to do is to get my desktop view to emulate the mobile view when i change the window size. For my site I only want to do a mobile and desktop version because I am using a 960 bootstrap grid and it works fine on an ipad.

[Kitty Giraudel]

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.

[Alen]

Here’s a quick media query sample. Resize the browser to see background color change. http://codepen.io/anon/pen/sJgkh

[Author]

Posts