Clever Geek Handbook

CSS Media Requests on iPad 3 (or newer iPad)

Will there be any difference in applying CSS Media Queries to discover the iPad 3 or the new iPad?

Also iPad 1 and iPad 2 returned device width as 768 pixels in both orientations. Is this the same on iPad 3?

+3


source to share


3 answers


Media queries for the new iPad (or iPad 3) remain pretty much the same. So if you check the minimum device width as 768px it will still work for the new iPad. However, to be more specific, you might want to check the 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

-1


source


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



+7


source


I believe so.

If you're concerned about the impact of further increasing pixel resolution on the new Retina display, add the following to the page header element:

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

See this article for some very helpful information on detecting viewport sizes:

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

0


source






More articles:


All Articles