Media-Query for the iPad

Question

In a website, I use a media query for small devices, effective for screen resolutions <=980px.

Problems is: on the iPad, in horizontal view (1024px), the css file is applied. Why is that?

On the desktop (Firefox), I don't have this problem. I tried changing to max-device-width, no difference.

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="medium.css" media="(max-width:1150px)">
<link rel="stylesheet" href="mobile.css" media="(max-width:980px)">

Thanks for the answers so far. To be clear: I am not looking for a way to target the iPad. I am looking for the reason behind the iPad's behaviour. It's screen has a width of 1024px, but it applies a stylesheet it should not. Why?

Edit: I found the problem/solution. See below.

Neither (max-device-width:980px) nor (max-width:980px) lead to the desired result. In both cases, the iPad applies the css file. — Teetrinker, Dec 17 '13 at 17:23

score 0 · Answer 1 · answered Dec 16 '13 at 11:17

0

try to create the media query within a seperate CSS stylesheet, which will automatically detect what size the viewport is.

This site is a really good one:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

answered Dec 16 '13 at 11:17

nareeboy

149
13

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

Use this media query to to target all iPad versions (iPad 1-5 & Mini).

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

Additionally, check out the solution posted for this problem.

edited May 23 '17 at 12:28

Community

1
1

answered Dec 17 '13 at 12:48

Vikram Deshmukh

12,304
4
36
38

I could specifically target the iPad. But I want the website to be responsive on any device. – Teetrinker Dec 17 '13 at 17:27

score 0 · Answer 3 · answered Dec 17 '13 at 13:18

0

you don't have to create additional CSS file for this just use this and add your code

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
----CODE HERE----
}


@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
----CODE HERE----
}

answered Dec 17 '13 at 13:18

Nishant

821
7
17

These are the media-queries to target iPad and don't use them inline .. put them in your css file and write your css between them ... and if it doesn't works check if there is anything with !important that might override this. – Nishant Dec 17 '13 at 17:30

Teetrinker · Accepted Answer · 2013-12-17T20:29:58.697

The iPad browser works with the following information:

width and device-width: 768 px

height and device-height: 1024 px

The orientation of the device does not matter in regard to which value is height and which one is the width!

That means in landscape mode, the browser promotes width = 768 px

In my opinion, this is a bug. The 'width' property should contain the width of the browser window.

Now I use the following media query on the website:

<link rel="stylesheet" href="mobile.css" media="(max-device-width:768px) and (orientation:portrait), (min-device-width:769px) and (max-width:980px)">

That works very well.

Media-Query for the iPad

4 Answers4