Grow your CSS skills. Land your dream job.

Media Queries for desktop and iPad

  • # October 27, 2012 at 2:15 pm

    Hi everyone!

    I’m trying to use a media rule to target CSS to both iPad and desktop with max-width: 768.

    I realized that ‘max-width’ doesn’t work for iPad (only desktop):

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

    so I had to this one for the iPad:

    @media only screen and (device-width: 768px) { … }

    However, I have the exact same redundant code inside both media rules. Then I tried this:

    @media only screen and (max-width: 767px) or (device-width: 768px) { … }

    This media rule works for desktop (any width though) and does not work for iPad. Which makes no sense to me.

    How to target both iPad and desktop with the same media rule?

    Should I use that CSS code I want to target as “default” and use a media rule to target specifically desktop with min-width: 768px ? Is that the only solution?

    Thanks!

    # October 27, 2012 at 2:18 pm

    can we have a link to the site?

    # October 27, 2012 at 2:24 pm

    http://www.zacalves.com/preview/11v/

    # October 27, 2012 at 3:27 pm

    I use @media all (max: width) and it works out just fine for my site.

    # October 27, 2012 at 7:40 pm

    Have you specified the viewport in your head?



    meta name="viewport" content="width=device-width, initial-scale=1.0"

    My recommendation and it’s probably not going to be popular is that you don’t have media queries that match device sizes.

    I basically use around 4/5 media queries, none at particular device sizes but rather just guestimates, like 1100px for “small screens” – 550px for mobile etc etc.

    The idea of media queries and responsive design is not that you match a device and only concern yourself with those, it’s that it works and looks great no matter what screen size is being used.

    # December 11, 2012 at 1:13 pm

    have you tried setting a minimum and maximum width? Also, your last CSS declaration is wrong, it should be:
    “@media screen and (max-width: 767px) and (device-width: etc”)
    but you wrote “or”.
    I don’t particularly like the meta viewport tag, it doesn’t work as great as everyone like us to believe. Actually I found it to be worthless at best.

    try setting a min and max width:
    @media screen and (min-width: 300px) and (max-width: 767px) {
    This worked fine for me, and my sites render on everything, although there’s alot of extra coding to do since there are alot of different phones with a lot of different resolutions. I gave up trying to code for them all. Also, none of the emulators or simulators will work at all, in fact they can’t for the simple reason that a pixel on your laptop or desktop monitor is not the same size as a pixel on a smart phone. You need to actual device to see if what you are doing is actually working.

    # December 11, 2012 at 3:51 pm

    @andy_unleash I agree with your mindset of not targeting specific device sizes with your media queries. Furthermore, I would say that this is certainly a pretty popular approach for designing responsively. Instead of using “guesstimates,” I have adopted (read: definitely did not pioneer this idea) the idea of coming up with media queries for when the site elements start to break down. I guess it could be looked at as a happy medium between using device sizes and using random sizes.

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

You must be logged in to reply to this topic.

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