Media Queries for desktop and iPad

[isaacalves]

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!

[matt_sanford]

can we have a link to the site?

[isaacalves]

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

[matt_sanford]

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

[djdaniel150]

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.

[demersdesigns]

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

[Author]

Posts