Media Query for iPad Air

I am having trouble with this query (only iPad). It is not being picked up while iPhone landscape and portrait work fine.

/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation :     portrait) {
body {
	background: red;
}
}

/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation :    landscape) {
    body {
	 background: green;
 }
 }

/* iPad Air */
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation : landscape) { 
 body {
   background: yellow;
}

}

That rule will make the background yellow on the ipad air when it is in landscape mode (which it does on the mac SDK simulator). Is that not what you wanted?

However chasing devices is a bad choice unless you are just developing an App for that system only. New Ipads keep cropping up all the time now and I’ve lost count of the variations so its not possible to continually code for specific devices.

You should concentrate on the design and just make sure it works from big too small and then you collect all devices on the way. Just throw in a media query at the point the design looks awkward or doesn’t fit. No need to know anything about devices unless you are specifically designing an APP or something just for ios and ios tablets.

2 Likes

no it doesn’t on my iPad Air. Other 2 media queries for the iPhone work just fine

It works on the simulator which is 99% accurate but I don;t have a real ipad air to test. You will only see the affect in landscape. I assume you haven’t locked the ipad into portrait mode only).

It may help if you have a link to the page in question so we can test the actual code you are using.

i will upload it to my server and send you the link

Hi Paul
Sorry for taking so long to respond. link is kamzic.com:8080
Let me know if you able to open this

You have your ipad media queries inside this rule.

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 380px)" href="css/small-device.css" />

So unless your ipad is less than 380px wide it will never read those rules that you have inside that small-device.css.

As I said above this is the wrong approach anyway because there are far too many devices now to follow this approach and you will miss more than you hit. You need to cater for all devices not just the ones you know and to do this simply open and close your desktop browser horizontally from large to small and make sure that the design always fits without a horizontal scrollbar. If it doesn’t fit or looks awkward then throw in a media query at that width (min or max-width but not device-width) and in that way you cater for all devices.

You do of course have to design carefully and make fluid elements rather than fixed width elements everywhere.

4 Likes

do you mean using percentage for the width?

For main containers, you can use a fixed max-width rather than fixed width. You can also set width set to a% if you want a gutter or just leave the default auto width.
The point is to stop thinking about specific devices, and make a page that works on any size.

2 Likes

As Sam above a max-width approach is usually best (in ems or px) rather than percent because you don’t want pages to get too wide. It does depend on content but I usually restrict content to a max-width of around 1280px. Of course background images can still stretch full width if you want but you have to build that into the layout as you go.

I generally avoid percentages for small columns because they soon get too small. I would use a small side column at 320px which I know will fit all current devices and that means I have little to change in that column when 2 or 3 columns become one. The remainder of the space in a two column layout has no width and just takes up the max width. I usually use the display table/table-cell approach as that means you can set one cell to 300px width and no width is required on the other column (cell) and it will stretch to fill the display:table element.

Then its just a matter of re-organising content as you go.

1 Like

but at some point you gonna have to start chaning things because menu and everything is going to have to be moved from top to the side of the screen for example?

1 Like

That’s when you add a media query. At the width where the menu breaks. Not at the size of one of a million different devices.

3 Likes

Yes as Sam said that would be the point that you add the media query and make the layout fit the width better. Most times a small tweak here and there does the job if the page is designed with tht intent in mind.

For a menu don’t fix the width of the items. Use display:table and table-cell and let the items just fill the width and spread naturally. No need for horizontal padding. In that way the menu can get quite small before you need to add your media query and turn it into either a hamburger menu or a vertical menu or remove unnecessary items.

The skill in responsive design is thinking ahead and making sure that you are not too rigid in your approach.

3 Likes

Thanks Paul,Sam

BTW…what did you guys think about page beside responsive design

Paul would you be able to advise how to go on about fixing my top menu so that as I am making the browser window smaller menu items adjust.

You will have to post some code or a link to the site so people can see how your menu is.

kamzic.com:8080

Interesting site.

I’m a bit puzzled because the page width is fixed quite wide except for specific devices. Do you not care if most users are excluded from being able to view your web site?

I don’t have any devices with those precise widths, plus I don’t really see the point in coding for specific devices so I am unable/unwilling to offer assistance. Sorry.

Hi Ron,
Of course I care and those 3 rules for iPads are just my tries to see how it works…if you were willing to land a hand I would be more than willing to work on it…

It’s not a very good advertisement for your services as a web designer if your website doesn’t cater for all viewing sizes.

2 Likes