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;}
}
Alles anzeigen
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?