How can I write css targeting to Macbook with touch enabled (Retina Display)

404 Views Asked by At

I want to show some content on "Macbook Pro with Touchbar" alone and hide the same in case of other desktops/laptops.

I know using media queries lets me target the devices and pixel ratio but here am trying to target the touch enabled laptop device.

Any suggestions or links would be of great help. Thanks in advance.

1

There are 1 best solutions below

0
On

That's not possible to achieve with CSS as it is not device specific. You can add media queries depending on the pixel ratio for retina devices, but not specific ones.

To be device specific I'd say you can try with user agent strings trying to find the latest MAC OS version using javascript and assuming it is a Mac Book Pro with Touchbar.

This library offers support for the Touchbar, so maybe with an instance of it on your js code, you can detect if it's supported or not, which means it has touch bar or not. Take a look at it and if you have more concrete questions make a new thread on SO being more specific.

https://electronjs.org/blog/touch-bar-support