CSS Media Queries for the iPad Pro

Written By : Liam Webster

Posted 03/11/2015

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.

Have any thoughts on our story? Or do you have a project relating to this that you want to get started?
Why not click here and drop us a message today!

Other posts you may be interested in

Do I need a good Google Pagespeed score?

This story starts back in 2014. Identify had just started to find its feet, we’d expanded into a bigger office, acquired some sizable projects and a couple of quality retainers, the Arctic Monkeys hadn’t started doing awkward lounge music, things were going well.

Read More

Hey there, couldn’t help noticing you’re using Internet Explorer

That’s great and all, and we commend you for pushing through with it. Unfortunately we no longer offer support for IE; it hasn’t received a major update since 2015 and Microsoft are dropping support for it later in the year.

If you’re using Windows 10 and want to stick with a built in browser, please consider switching to Edge. Or, if you really want to enjoy the internet properly we strongly recommend downloading Google Chrome here.