It’s pretty normal that websites would have multiple stylesheets and varying designs for certain devices to maximize screen real estate and optimize the experience for certain user bases (we have desktop, iPad, and iPhone optimized sites). In most cases a developer can target a device to serve a user a proper layout and design for their device. Well, in most cases except the iPad mini. According to a developer on StackOverflow, Apple has made it impossible to target the iPad mini as a device; instead Apple serves up the same device information that the iPad 2 serves up to developers:
Apple’s iPad Mini is a smaller clone of the iPad 2 in more ways than we’d want. In javascript,
thewindow.navigatorobject exposes the same values for the Mini and iPad 2. My tests so far to detect the difference have not lead to success … Things I have tried so far (including some pretty obvious approaches):* window.devicepixelratio
* CSS element width in cm unit
* CSS media queries (such as resolution and -webkit-device-pixel-ratio)
* SVG drawings in similar units
* Doing all sorts of CSS webkit transforms for a set time and counting rendered frames withrequestAnimFrame (I was hoping to detect a measurable difference)
From the sounds of it, customers shouldn’t expect optimized experiences on their iPad minis any time soon. Obviously there’s a positive and negative side to this type of approach. Apple could be trying to minimize the fragmentation between its products. After all, having another stylesheet to optimize can be a major pain for developers. The resolution is the same between the iPad 2 and the iPad mini, so if a site is optimized for the iPad 2, it could already be running in tip top shape on the iPad mini. But, when it comes to screen real estate, display sizes between devices can also be problematic for designers. While the resolution is the same between the iPad 2 and iPad mini, the display and usage tendencies vary widely between the devices. One display is 9.7-inches while the other is 7.9-inches. One iPad is held with two hands normally, while the other is often used with one hand. Not being able to focus in on one particular device can be a major challenge for developers and designers, and could ultimately ruin user experiences.
It’s also kind of funny that Apple would take this kind of approach considering they enjoy showing user experiences on Android tablets during its keynotes. It’s not unusual for someone like Phil Schiller to get on stage and show how tablet applications on an Android tablet are actually phone-optimized stylesheets expanded to a tablet resolution. This is kind of exactly like that, but for the iPad mini. If it’s a flaw with Android, clearly it should be a flaw for Apple and the iPad mini. If you’re a developer and you’re thinking about optimizing your website for the iPad mini, it sounds like you’re out of luck, at least for now.
Hopefully this gets changed sooner rather than later.
