iPad 3 and iPad 4 Media Query
Posted: March 7th, 2012
by Hal Gatewood
Need to target the new iPad 3 or iPad 4? Here are the CSS3 Media Queries to make that happen. Include the top in your CSS file directly or use the <link> below to create a specific stylesheet just for those devices.
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2)
{
body { background: red !important; }
}
<link type="text/css" rel="stylesheet" media="and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2)" href="/iPadRetina.css" />We’ll see if they work once the new iPad comes out.
7:20 am
Hello.
I picked up your solution and cited it in my article about the use of Media Queries with the new iPad (in German).
http://fux.interwall.net/user-experience/media-queries-fur-ipad-3/
Thanks
Claudio.
6:28 am
Hello,
If you use the useful media viewport “width=device-width”, the device-width of the iPad3 will be 1024×768.
So the same as on the iPad2 and iPad3. The only difference would be resolution in DPI.
and the mediaquery could be :
@media (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)
6:31 am
I should have written “@media (min-width: 768px) and (max-width: 1024px)” instead of “@media (min-device-width: 768px) and (max-device-width: 1024px)”
11:06 am
But will be the ultimate solution may be a new img tag type of markup, to call the preferred size graphic… not based on resolution – as stated (near the end) of this article…
http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/
11:18 am
Would be nice, however, according to his example you will still need to use media queries to present the correct image: media=”min-width: 800px”.
5:52 am
I guess the best would be to have a special design for iPad 3 huge resolution and for others plateforme we simply put the “width=device-width” meta tag :) Don’t know how we could figure out something on that.
Cheers
10:44 pm
FYI — the viewport (the actual area that you see the website in) of an ipad is 1024×690. So if you are designing something to fit exactly on an ipad…. 768px won’t work!
1:04 pm
Thanks for this worked perfect, you should update your post to include Raphael Goetter’s comment. I used it to change a background from FIXED to SCROLL for ipad as they dont support fixed BGs.
Thanks!