Update:
We've found a solution for our problem by focusing on the fact that tablets don't have mouse but point with their fingers. It is therefore solved via classes.
There are 2 classes, each assigned to the corresponding element: First class to show the function for desktop users, 2nd class to show the function for tablet users. the expression @media (pointer:coarse) evaluates which one is relevant.
.container-nonTouchDevice { // DESKTOP
display: block;
}
.container-touchDevice { // TABLET
display: none;
}
@media (pointer:coarse) {
.container-nonTouchDevice { // DESKTOP
display: none;
}
.container-touchDevice { // TABLET
display: block;
}
We had the same issue. Especially with SurfaceTab tablets. These tablets report themselves as laptops, even when in tablet mode.We ended up giving the users the URL with ?profile=tablet in it. Not nice but it solved the issue.