Touchscreen / Mobile-Geräte erkennen: Media Queries funktionieren nicht

Um meine Modalboxen in den Dimensionen bestmöglich an Mobilgeräte oder Touchscreen-Devices anpassen zu können, möchte ich diese per media-queries erfassen. Gemäß Mozilla-Anleitung hier: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer oder der Beschreibungen von https://www.w3schools.com/css/css_rwd_mediaqueries.asp habe ich mir dann folgende Queries gebastelt:

@media screen and (pointer: none) or (max-width: 600px){
.touch {
display: none;}
}
@media screen and (pointer: none) and (orientation: landscape) or (max-width: 600px) {
.touch-portr {
display: none;}
}
@media screen and (pointer: none) and (orientation: portrait) or (max-width: 600px) {
.touch-landsc {
display: none;}
}

Mit der Klasse "touch" möchte ich verhindern, dass der Link für die Modalbox-Variante für Desktop trotzdem auf z.B. Smartphones angezeigt wird.

Mit der Klasse "touch-portr" möchte ich verhindern, dass der Link für die Modalbox-Variante für Mobilgeräte im Landscape-Modus angezeigt wird, obwohl das Gerät im Portrait-Modus ist.

Mit der Klasse "touch-landsc" möchte ich verhindern, dass der Link für die Modalbox-Variante für Mobilgeräte im Portrait-Modus angezeigt wird, obwohl das Gerät im Landscape-Modus ist.

Leider funktioniert keine dieser Regeln, obwohl ich zum einfacheren Testen noch "or (max-width: 600px)" hinzugefügt habe. So müsste ich im Desktop-Browser beim Verkleinern der Fensterbreite bereits sehen können, ob der Link unterhalb von 600px Breite verschwindet.

Ich kann nicht erkennen, was ich falsch mache! – Vielleicht gibt es auch noch einfachere Queries, die das von mir Gewünschte bewirken?

Also es scheint so, als ob (pointer: none) nicht vom Firefox auf Android berücksichtigt wird und auch nicht vom Midori-Browser. Jedenfalls passiert gar nichts bei:

@media screen and (pointer: none) {
.touch {
display: none;}
}

und any-hover oder any-pointer funktionieren genau so wenig auf dem Android. Auf dem Desktop reagiert aber der Firefox, wenn ich pointer: fine definiere.

Jetzt kapier ich nix mehr: Die Kondition "pointer" ist offensichtlich "kaputt":

Auf meinem Galaxy S9+ wird auf allen Browsern (pointer: coarse) berücksichtigt, aber nicht (pointer: none).

Jetzt denke ich, dass es aber auch Mobilgeräte geben könnte, die (pointer: none) berücksichtigen und habe daher probiert:

@media screen and (pointer: coarse) or (pointer: none) {
.touch {
border: solid 2px red;}
}

Und schon wird auf dem Android auch (pointer: coarse) nicht mehr berücksichtigt sobald (pointer: none) im Spiel ist. Dann wird anscheinend die ganze Query Regel verworfen!

Das gleiche gilt übrigens auch für (orientation: landscape) oder (orientation: portrait): Sobald das in der Query auftaucht, wird die Query insgesamt verworfen / unberücksichtigt.

Und was passiert dann auf Tablets mit Eingabestift? Hat jemand eine funktionierende Query, mit der halbwegs zuverlässig Smartphones erkannt werden?

Nun habe ich auch alle möglichen Versuche mit aspect-ratio durch und NIX geht. Das sind meine jetzt letzten Versuche:

/* Nur wenn Touchscreen und Portrait-Format (>4:3) vorliegt, wird für Landscape nicht angezeigt */
@media screen and (pointer: coarse) and (min-aspect-ratio: 4/3) {
.touch-landsc {
display: none;
}
}
/* Nur wenn Touchscreen und Portrait-Format (>3:4) vorliegt, wird für Portrait nicht angezeigt */
@media screen and (pointer: coarse) and (min-aspect-ratio: 3/4) {
.touch-portr {
display: none;
}
}
/* Nur wenn Screen mit Maus- oder Stifteingabe vorliegt = Regel für Desktop */
@media screen and (pointer: coarse) {
.touch {
display: none;
}
}

Sinn der ganzen Queries ist es, nur eines von drei Elementen anzuzeigen, passen dazu, ob es sich um ein Mobilgerät im Quer- oder Hochformat handelt oder ob es sich um einen Desktop Screen handelt.

Nach all den Versuchen kann ich hier nur noch folgende Erkenntnisse mitteilen:

pointer: fine wird vom Desktop ausgewertet, sofern keine weitere Bedingung mit and verbunden wird.

pointer: fine wird nicht vom Android-Browser ausgewertet und die Query wird ungültig

hover: hover wird vom Desktop ausgewertet und lässt sich auch mit min-width und max-width kombinieren

hover: hover und hover: none wird nicht vom Android-Browser ausgewertet und die Query wird ungültig

Diese Ergebnisse widersprechen allem, was ich bnei Mozilla, bei w3school und vielen anderen im Web gefunden habe. Ich bin auch sicher, dass es in meiner Test-Website keinen Code gibt, der die o.g. Queries unwirksam machen könnte.

Was kann ich jetzt noch tun? Mit Javascript weiter machen? Da kenn ich mich nicht aus!

So, jetzt habe ich eine Lösung gefunden. Da ich bei meinen Webrecherchen nix dazu gefunden habe, gehe ich mal davon aus, dass diese Lösung hier auf Interesse stoßen könnte.

Ich habe meine Lösung auf einem 2540 x 1440 und einem 1920 x 1080 Screen sowie auf meinem Android Galaxy S9+ getestet und sie funktionierte zuverlässig.

Zwei Dinge haben mir bei meinen vorigen Versuchen im Weg gestanden:

1.) Ich glaubte, ich sollte in einer Query mehrere Konditionen miteinander durch "and" verbinden. Das führte dazu, dass die ganze Query oftmals verworfen / nicht berücksichtigt wurde vom Browser. Kommas hinter den einzelnen Konditionen brachten den ersten Teil-Erfolg. – Komisch: Ich dachte, die Kommas stellen eine Oder-Funktion dar.

2.) Ich hatte zuerst die Query und danach die Klasse definiert mit ihren Eigenschaften. Nun habe ich es umgedreht und zunächst die Klasse benannt und die ihr zugewiesenen Eigenschaften von der Erfüllung der Query abhängig gemacht, die dann vor Beginn der Eigenschaften stehen muss.

Hier nun die drei Klassen mit ihren Queries:

/* Nur wenn Touchscreen und Portrait-Format (>4:3) vorliegt, wird für Landscape nicht angezeigt */
.touch-portr {
    @media screen and (pointer: fine), (orientation: landscape) {
        display: none;
    }
}
/* Nur wenn Touchscreen und Portrait-Format (>3:4) vorliegt, wird für Portrait nicht angezeigt */
.touch-landsc {
    @media screen and (pointer: fine), not (orientation: landscape) {
        display: none;
    }
}
/* Nur wenn Screen mit Maus- oder Stifteingabe vorliegt = Regel für Desktop */
.touch {
    @media screen and (pointer: coarse), not (pointer: fine) {
        display: none;
    }
}

Ich freue mich darüber, dass ich nun auch mal etwas zurück geben kann, nachdem mir hier im Forum schon so oft geholfen wurde!

Falls jemand eine Verbesserung zu meiner Lösung hat, bin ich sehr interessiert.