Responsive issue with iPad Pro 10.5" (portrait mode)

Just came back from “beta-testing” my site at the local Apple store. My Foundry site works as expected on all devices except for the iPad Pro 10.5". Rather than getting the “tablet” layout, it’s displaying the “desktop” layout, which results in the truncation of some key Call-To-Action buttons.

Example:

Desktop version CTA = “Start Preparing”
Tablet version CTA = “Prepare”

It seems the screen resolution should support the desktop layout - my main content is 1500 px wide, the iPad Pro 10.5" is 1668 pixels wide in portrait mode.

Is there a way to either get the iPad Pro to properly display the desktop layout (with no truncation) OR display the tablet layout?

(An aside on this topic - Previewing the site in Developer Mode in Safari doesn’t match what really happens in the wild - not only with iPad Pro, but also with iPhone 6S+ etc).

My “in the works” site is at www.takecharge.ca/dev. Any comments/tips appreciated. I’m a financial guy masquerading as a web designer!

Thanks,

JR

Hey there @LexCan – See my post here about breakpoints. It applies to this post as well. The breakpoints are determined by width and not device type. A large device like the iPad Pro 10.5" is going to have a much larger swath of screen real estate. In this case the iPad Pro’s width at landscape mode is going to fall into the desktop range. This goes for all mobile devices, not just iOS devices.