3

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 ?

2

3 Answers 3

7

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

0

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

-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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.