Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS responsive help

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #39243
    cybershot
    Participant

    I am trying to load a stylesheet for responsive design and I tried it this way

    this is being loaded into wordpress

    It works, I see the stylesheet in the header and it does link to the stylesheet. But when I visit the site on my droid, I don’t see any changes. Do you know why?

    #107439
    trinzia
    Participant

    Did you try putting that into the stylesheet directly, like:

    @media only screen
    and (max-width : 480px) {
    .outermargin {
    width:100%; margin:5px auto;
    }
    }
    I need to know if that works. :) I don’t have a cellphone.

    #107448
    trinzia
    Participant

    There’s a thread here: http://stackoverflow.com/questions/6786701/droid-2-not-detected-by-css-media-query.
    Says your screen thinks it is 845px. I thought those screens were only about 2-3 inches across, no? try 845 + ?

    #107453
    trinzia
    Participant

    One user says that all the documentation is off because it’s using zooms and things. Maybe this one:
    @media (-webkit-min-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (min–moz-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
    /* high resolution styles */
    }
    I’m considering whether jQuery might be used just to detect available screen width, and make it simpler than all this guessing.

    Edit: Found some more pages about pixel ratios:
    http://www.hanselman.com/blog/SupportingHighdpiPixeldenseRetinaDisplaysLikeIPhonesOrTheIPad3WithCSSOrIMG.aspx
    http://css3.bradshawenterprises.com/blog/retina-image-replacement-for-new-ipad/

    If you use jQuery, that line could be useful:
    var pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1;

    #107500
    trinzia
    Participant

    More links:
    http://sunpig.com/martin/archives/2012/03/18/goldilocks-and-the-three-device-pixel-ratios.html
    This was very helpful for me to visualize what’s going on.

    And then there’s Modernizr media queries: http://modernizr.com/docs/#installing

    #107501
    trinzia
    Participant

    Thinking it over, first you’d want this in your head, probably before you import your css:

    meta name=”viewport” content=”width=device-width”

    And then could you test this? I would hope that it would catch any device with a pixel ratio greater than 1, and then with a width less than the iPAds.

    /* Catch anything higher than 1, and screen width less than iPad */
    @media (-webkit-min-device-pixel-ratio: 1.1),
    (-o-min-device-pixel-ratio: 2.1/2),
    (min–moz-device-pixel-ratio: 1.1),
    (min-device-pixel-ratio: 1.1)
    and (max-device-width : 767px) {

    }

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.