Grow your CSS skills. Land your dream job.

Viewing Media Queries in Browser

  • # March 14, 2013 at 12:32 pm

    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

    # 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?

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

    # March 14, 2013 at 4:57 pm

    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.

    # 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.

    # March 14, 2013 at 6:28 pm

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".