CSS Media Queries on iPad 3 (or the new iPad)

Question

Is there going to be any difference in applying the CSS Media Queries for detecting the iPad 3 or the new iPad?

Also the iPad 1 and iPad 2 returned device-width as 768px in both orientations. So is that the same on iPad 3 as well ?

We figured it out in this topic: http://stackoverflow.com/questions/9780189/retina-ipad-specific-css/9793715#9793715 — Connor, Mar 26 '12 at 00:19

score 7 · Answer 1 · edited Jul 03 '12 at 05:37

7

The new iPad reports the same device-width as the first and second iPads (768).

edited Jul 03 '12 at 05:37

jonsca

10,218
26
54
62

answered Jun 02 '12 at 08:44

Teemu Talja

71
1
2

score 0 · Answer 2 · answered Mar 27 '12 at 10:17

I believe it is.

If you're worried about the impact of the further increase in pixel resolution of the new Retina display, then add the following to your page's head element:

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

See this article with very useful information on detecting the viewport dimensions:

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm

score -1 · Accepted Answer · edited Jul 16 '12 at 06:14

-1

The Media Queries for the new iPad (or iPad 3) remains almost the same. So if you check for min-device-width as 768px, it would still work for the new iPad. However, to give a more specific query, you can check for device-width between 1536 px and 2048 px.

There is a very good tutorial on using CSS Media Queries at http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8

edited Jul 16 '12 at 06:14

copenndthagen

49,230
102
290
442

answered Mar 28 '12 at 06:13

user1297293

96
1
6

CSS Media Queries on iPad 3 (or the new iPad)

3 Answers3