Layout Break points clash with iPad Pro and Desktop sizes

(Mark Hunte) #1

It is possible I have missed this one the forum…

What are people doing to counter clashes for iPad Pro pixel size and a desktops pixel size.

I.e iPad Pro sizes are 1366 x 1024 , 1024 x 1366 and desktop is 1280 x 800.

So for example I want some buttons to show in iPad Pro but not Desktop

Has anyone come up with a good strategy to avoid clashes

(René) #2

You can use a javascript to detect the device
vDevice = navigator.platform; if (vDevice.indexOf("iPhone") > -1 || vDevice.indexOf("iPod")> -1 || vDevice.indexOf("iPad") > -1) { \\do something };

(Mark Hunte) #3

Thanks @rene,

I was hoping there was a way to avoid using something like navigator.platform or user agents.
The advice seems to be they are unreliable for one reason or another.

Have you found navigator.platform to work well.?

(Freelancer) #4

in this article I’ve found a an interesting solution to recognize the device

$ipad-pro-portrait-breakpoint: "(min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1024px) and (max-width: 1024px)";
$ipad-pro-landscape-breakpoint: "(min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1366px) and (max-width: 1366px)";

(Mark Hunte) #5

Thanks @michelangelo,

I will have a look at that.