Anyone who works on the design of responsive websites will always have a UX checklist and one thing that can be an on-going frustration; cross-browser and cross-device testing. With an increasing number of both mobile and desktop devices (with mobile encompassing the ever growing range of tablets on the market), it’s becoming a necessity to know and have access to the correct CSS media queries across all different devices to ensure that a site displays in an optimal way for every single site visitor.
Whilst it’s all too easy to find (and many now know off by heart) the media queries needed for common devices, savvy web designers and developers are always working one step ahead, ensuring that their creations not only work on every device today but that they work on every device tomorrow as well.
With this in mind, the question which many are asking at the moment is:
What are the CSS media queries needed for the iPad Pro?
Unless you’ve been hiding under a rock for the past couple of months, you’ll no doubt be aware that Apple are releasing their latest addition to the iPad family, the iPad Pro this month; a tablet with a 12.9inch retina display. To many, an upon-launch purchase will be a given and, as is always the case when devices with new dimensions are released, this means ensuring that web creations work fluidly and continue to look great regardless of the device viewed on.
As such, for all you web designers and developers wondering which CSS media queries you’ll need to use to ensure your sites look great on an iPad Pro:
@media only screen
and (min-device-width : 1024px)
and (max-device-width : 1366px) { /* STYLES GO HERE */}
Of course, if you’re already developing responsive websites correctly, you should already have your site set up in a way that utilises breakpoints based on the content rather than on a per-device basis, however we’re the first to admit that there’s times when we need to make display tweaks on a device-specific basis and we’d certainly expect it to be the iPad Pro breakpoints which cause a few headaches over the coming months!
We are now, in many cases, seeing a very fine line between smartphones, tablets and laptops and, in many cases, we’re seeing smartphones (iPhone 6S Plus as an example) not much smaller than some of the smaller tablets on the market. Similarly, we’re seeing the launch of devices (such as the eagerly awaited iPad Pro) only ever so slightly smaller than laptops. In terms of Apple devices, the iPad Pro will have a larger display than their ‘Macbook‘ device. The boundaries between each are getting smaller and smaller and, before long, we’ll see a crossover greater than ever before and a design and development approach which continues to consider great user experience regardless of the device the site is viewed on.