Question about tablet media-queries

Hi,

So i usually use @media screen and (max-width: 767px) { … } for ipad and below but since the resolution on most tablet is so high won’t this show the same result if visiting the site on a desktop?

If i visit a responsive tester like http://responsivetest.net/#u=http://www.magentothemes.net|1024|768|1 it looks the same on desktop and ipad, except it is a bit more pressed-togheter on the ipad.

Should I use a different media-query for tablets? Like if it is a tablet use the css inside (max-width: 767px) etc?

HI,

The first thing I need to check is that if you are using the viewport meta tag?

If you aren’t using that tag then the media query is ignored for mobile and you just get a compressed version of the a site (the device assumes the site is 980px wide and then scales it too fit).

If you do have the viewport meta tag in place then the view on the ipad at 767px will be much the same as a desktop when the window is 767px. You don’t really need to know about the devices resolution as they are all different but do not affect the width media query anyway. There can be issues with image quality on double density devices but that’s not specifically tied to media queries either.

All you need to think about is adding width media queries at the points in your design where the design starts to look awkward or doesn’t fit the window. No need to know about devices or window sizes just be ‘design centric’ not device centric’ and in that way your design will fit all devices automatically (within reason).

It does mean steering away from fixed width designs as such but creating more fluid/elastic components into the design from scratch.

Hi, sorry for the late reply. I understand what you mean and i have this meta-tag:

<meta name=“viewport” content=“user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width”>

And I have a media-query that looks like this:

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

And inside this is the changes to the css below that width. The thing is I want these styles to apply to all touch-devices (tablets and below). But atm if I go to the website on a ipad or even ipad-mini I just get the same view as on my desktop or on screen-width above 767px, so obviously the screen of the tablets is larger than 767px. And this is no good because the css and design of the website above 767px isnt directly touch/mobile friendly. It works fine on iphone/other smartphones tho.

What I am looking for is something like:

@media screen and (max-width: 767px) and touch-devices { … }

I changed the query to (max-width: 1100px) and now it looks good in ipad, however I would still like to know if it is possible to target tablets with some “touch-devices” media query or something similar.

That’s a very unfriendly meta tag as it stop users from zooming on those devices and I can guarantee that it will be the one thing that they want to do.

This is the meta tag I recommend:


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

And I have a media-query that looks like this:

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

And inside this is the changes to the css below that width. The thing is I want these styles to apply to all touch-devices (tablets and below). But atm if I go to the website on a ipad or even ipad-mini I just get the same view as on my desktop or on screen-width above 767px, so obviously the screen of the tablets is larger than 767px. And this is no good because the css and design of the website above 767px isnt directly touch/mobile friendly. It works fine on iphone/other smartphones tho.

What I am looking for is something like:

@media screen and (max-width: 767px) and touch-devices { … }

The problem with this approach is that you now need to know the width of every device out there under the sun and the list probably runs into hundreds. You can never cater for all devices like this.

What you should be doing is creating a site that fits on all resolutions automatically. You do this by creating breakpoints at the point in the design where something needs to change and then you add a breakpoint and make the design change. So you start with your window large (or vice versa) and then as you close the window there will come a point where the design doesn’t fit and then at that point you add your media query and adjust the design so it fits. You do this throughout the whole range from large to small and in that way you collect every device known to man automatically. Generally there will be 3 or 4 breakpoints that need to be inserted but they are design centric not device centric. Of course it means that you need to build an elastic/fluid site to begin with but no one builds fixed width sites these days do they :slight_smile:

Otherwise you are going to need a whole bunch of stuff and detect device width rather than layout width also. See here and [URL=“http://code-tricks.com/css-media-queries-for-common-devices/”]here for a run down.

Remember that touch devices aren’t just tablets any more and larger devices now have touch screen capability.

Okey. Yeah the site is fluid and procent-based, but I changed the query to (max-width: 1100px) instead so the styles are changed earlier, so now it looks like it should on tablets etc.