Danke für deinen Hinweis. Mit clamp() habe ich bereits vor knapp einem Jahr experimentiert, um die Fontgröße eines Textes zu variieren, die über einem Bild liegt (Overlay). Das Bild skaliert gut auf den verschiedenen Geräten. Aber die Schrift muss sehr genau angepasst werden, damit sie harmonisch passt und auch nicht wichtige Bildteile verdeckt.
Clamp hat bei einem guten teil der Browser nicht zuverlässig funktioniert.
Es gibt erstaunlich viele CSS Definitionen, die nicht wirklich in allen möglichen Browsern zuverlässig funktionieren. So hatte ich hier ja im Frühjahr versucht zu klären, wie man mit CSS appearance() die Mobilbrowser dazu bringen kann, die Formular-Eingabefelder und Option-Felder so darzustellen, wie ich das gerne hätte. Nada! Jeder Browser macht da was er will!
Aktuell definiere ich die Größe des Logo / Signet mittels media-query wie folgt:
@media screen and (max-width: 480px) {
width: 80vw !important;
min-width: 300px;
max-width: 400px;
padding-bottom: 0px;
margin-left: 6px;}
}
Die weiteren queries folgen diesem Prinzip. Das führt dazu, dass das Logo z.B. auf einem Tablet im Potraitmodus gut aussieht, aber auf einem Smartphone im Querformat, was ja ungefähr ein ähnliches Pixelmaß hat wie das Tablet, über ein Drittel der Bildschirmhöhe vom Signet eingenommen wird.
Mir fehlen also nicht Definitionsmöglichkeiten, die vom Pixelmaß abhängen, sondern das Kriterium ist: Smartphone im Querformat.
Und dann ist sogar die Bedingung "pointer: coarse" zu ungenau, weil sie ja auch für Tablets und Laptops mit TouchScreen gelten würde.
Ich fand (witziger Weise mit Hilfe der KI im BraveBrowser) folgendes Javascript, um Smartphones über den UserAgent zu erkennen:
const isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if (isMobile.any()) {
// Mobile!
} else {
// Not mobile
}
Alles anzeigen
Nun müsste dieser Code noch durch die Bedingung "if orientation = landscape" ergänzt werden. Oder durch "aspect-ratio".
Ferner bin ich bereits mit der vermutlich einfachen Aufgabe überfordert, die "if" und "else" Zeilen so zu ergänzen, dass der gewünschte Effekt "sticky" oder "non-sticky" zustande kommt.
Vielleicht findet sich ja noch jemand hier, der mir dabei hilft?