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

Home Forums CSS Media Queries—best practice for retina when mobile first

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #40641

    Recently, I designed a small static page to host an online resume, etc.

    I filled out the content and the structure of the HTML file first (no styling whatsoever). Noticing that the layout was responsive just like that, I styled it up for mobile (single column) and it looked great (side-note: I took a cue from Chris Coyier’s recent redesign of his personal site and declared a font-family and a size of x-large and left everything to default user-agent styles. It’s actually a really great way to work).

    At this point, the site looked just like I wanted it to on my iPhone. Great!

    I added a media query for larger screen sizes. eg:

    @media (min-width: 800px)

    and I bumped the type size down a bit. I floated some elements, adjusted a few things, added a max-width paramater to the content wrapper, and I was done. I had a quick and easy site with a one column view that looked nice on a mobile phone and a gridded desktop view.

    However, the iphone was rendering the desktop layout. In fact, any number below 990 or so would render the desktop site.

    Now, I am aware of the retina specific media queries, but I’m trying to figure out the most elegant way to include them. Essentially, I want my structure to stay Single column -> Desktop. Is there a way to do an if statement with media queries or a @media -> default kind of query?

    Thanks if anyone has a solution.


    If I understand what you are saying correctly you have styles for desktop in your media query, correct?

    if thats the case it should be the other way around. Desktop styles out side of the media query and mobile inside:

    @media only screen and (max-width: 767px){}

    well thats how I develop for mobile.


    I’ve done it that way in the past, but I don’t want to do it that way this time. It’s for a philosophical reason perhaps as much as a practical one. An unstyled website is already responsive, so I’m progressive building in “less flexibility”. I’m adding floats to get a new layout rather than rather than turning them off, and I don’t have any unnecessary clearfixes or overflow:auto in the rendered single column markup. You are able to load higher quality images after the lower quality ones, which would be nice for those on mobile bandwidths.

    Somehow, I feel like it’s a better way to work.

    And works fine as is, but it’s the retina screen alone that’s causing me trouble.


    I’ve played around with the retina media query, but the problem I’m having is that it is not behaving the way I want it to.

    Let’s say I have my single column layout (the default or first set of css declarations). There is no media query


    to that I add a media query for “min-pixel-ratio: 1.5” (or 2) (I can change background color to purple here to prove it works)


    beneath that come my media query “min-width: 800” for the two column layout that flows up to a max-width of 1500px.`

    The iOS simulator gives me the two column layout and a purple background.


    Can you provide us with a link?


    Ok. I put together a quick test case. I didn’t use codepen because of the need to view in on a mobile phone/iphone.


    Here are some screen shots too.

    When I duplicate the layout code in the retina media query I get this:[render when query is before 2 column layout]( “Screenshot 2”).

    When I move that media query beneath the 2 column layout: [the aside renders properly but the article retains its floated dimensions]( “Screenshot 1”)


    Alright. I was riding home on the train and I thought: what about that meta tag for mobile devices:

    Everything is right as rain now. I’ll leave the fixed test up for a little longer in the event that anyone else is having this problem.

    BTW, I highly recommend working this way (from single column up). It’s a lot easier to keep track of everything and you don’t have to write a lot of needless code.

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