The new iPads and our websites
Now that Apple has announced their iPad lineup for the holidays, it's about time to think how our websites are going to work on it.
The 4th generation iPad looks like it has the exact same screen as the 3rd generation iPad. So nothing should change.
How to target the iPad mini with media queries?
Well, first, it's important to think at why you need to target it - or to say it another way - do you need to target it? Of course, if you've done proper responsive design, you probably shouldn't worry about it.
Now, what do we know about the device?
It's a 7,9 inch screen with a resolution of 1024x768. That's the same resolution than the first two iPads with a substantially smaller screen. Since the iPad browser doesn't recognize the resolution media feature, we need to know what the device-pixel-ratio will be.
The only hint we have so far is that native iPad apps will look the same pixel for pixel, in other words they will be shrunk down.
We can then only assume that Safari will work the same way. In that case it means we'll have a device-pixel-ratio of 1 and 1024x768 pixels exposed. And everything will be a bit smaller. If this assumption proves to be true, this is where you might want to get your fonts a bit bigger on the iPad mini.
The only way to detect that iPad mini might be to use the width and height with the mm unit. Combined with the px versions, they might end up giving you the css pixel density of the device.
Obviously this is all speculation at this point.
The simplest way, if you have an iPad mini, is to click here so you (and we) will know for sure.
Update on the Nov 7th 2012. Alas, it looks like all my plans are foiled. It looks like the mm unit for width and height is not reflecting real dimensions but are just a factor of the px unit. So no, there is no way to target the iPad mini, and all websites will just look smaller on it.
