jQuery / CSS-Lösung gesucht um "Smartphone Querformat" erkennen zu können

Ich arbeite mit Uikit bzw. YooTheme Pagebuilder. Auf meinen Websites habe ich mein Signet immer oben sichtbar (=sticky) bzw. in der uikit-Sprache = uk-sticky

Das Signet verändert seine Größe abhängig vom Viewport, weil ich seine Breite per CSS mit vw und max-width definiert habe. Das sieht elegant aus, ausgenommen bei der Darstellung im Smartphone-Querformat. Moderne Smartphones haben eine derartig große Pixelbreite, dass das Signet dann mehr als 1/3 der Bildschirmhöhe einnimmt.

Um das zu vermeiden, wurde versucht, das Signet erst ab 770 Pixel Breite sticky zu machen. Eine nur von Screenwidth abhängige Unterscheidung reicht aber bei den heutigen Smartphones nicht mehr aus: So hat mein Google Pixel 8 ein Display von 412 x 915 px bei Faktor 2,63.

Mein Ziel ist:

Es soll erkannt werden, ob die Website auf einem Smartphone im Querformat angezeigt wird. Wenn ja, soll mein Signet "nicht sticky" angezeigt werden. In allen anderen Fällen der Darstellung soll es am oberen Rand stehen bleiben während der sonstige Inhalt der Webseite scrollt.

Einen jQuery-Lösungsansatz habe ich, leider nur mit dem einzigen Unterscheidungskriterium Screenwidth. Aber diesen Script-Schnippsel könnte man evtl. erweitern, sodass die gewünschte Funktion erreicht wird?

    jQuery(function($) {
     $('.tm-header-mobile .uk-sticky').attr('uk-sticky','media: 770');
     });

tm-header-mobile repräsentiert das Signet. .uk-sticky ist die CSS-Klasse im UIkit, durch die das Element fixiert wird.

Bevor ich diese jQuery-Lösung eingebaut habe, hatte ich versucht, die Aufgabe per CSS media-query zu lösen und verwendete z.B.

@media only screen and (orientation: landscape) and (pointer: coarse)

Leider werden diese media-queries anscheinend von vielen Browsern nicht beachtet, speziell nicht von Mobil-Browsern. Wenn es funktionieren würde, wäre es ja Klasse und ich müsste dann nur den CSS-Code aus der Klasse uk-sticky als Definition hinein kopieren. – Script-Lösungen kann ich leider gar nicht selbst basteln, weil ich nix davon verstehe.

Mit welchen Lösungen habt Ihr gute Erfahrungen gemacht?

WM-Loose hast du meine Frage verstanden? Ich beschrieb ja, warum eine einfache media-query mit der Screenwidth nicht zum gewünschten Ergebnis führen kann. Im Übrigen ist solch eine Query zurzeit auf der Website aktiv und funktioniert. Sie liefert aber bei einem Smartphone im Querformat nicht das gewünschte Ergebnis.

Wenn meine Frage also so grundsätzlich unverstanden blieb, was soll da noch eine URL helfen? – Aber bitte, daran soll's nicht liegen:
Clemens' Psychotherapie Weinheim – Startseite

Matzeweb Hast du diesen Teil meines ersten Beitrags gelesen?

Zitat

Bevor ich diese jQuery-Lösung eingebaut habe, hatte ich versucht, die Aufgabe per CSS media-query zu lösen und verwendete z.B.

@media only screen and (orientation: landscape) and (pointer: coarse)

Leider werden diese media-queries anscheinend von vielen Browsern nicht beachtet, speziell nicht von Mobil-Browsern. Wenn es funktionieren würde, wäre es ja Klasse und ich müsste dann nur den CSS-Code aus der Klasse uk-sticky als Definition hinein kopieren. – Script-Lösungen kann ich leider gar nicht selbst basteln, weil ich nix davon verstehe.

Da diese media query anscheinend von manchen Mobilbrowsern ignoriert wird, wäre es doch eine clevere Idee, die Mediaquery durch Javascript erledigen zu lassen. Und dazu hatte ich ja den Codeschnippsel der bereits aktuell genutzte Teil-Lösung gepostet. Dieses Script setzt aber nur das "Attribut" 770px zur CSS-Klasse "uk-sticky", welche sich dann auf Elemente der Klasse tm-hedaer-mobile auswirkt.

Mein Wunsch ist, die Mediaquery durch jQuery oder anderes JS ausführen zu lassen, wodurch dann in dem gewünschten Fall "Touch-Device und Querformat" das Signet auf non-sticky gesetzt wird. Javascript-basierte Media-Queries funktionieren anscheinend zuverlässiger, als reine CSS-basierte.

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
}

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?

Rolf Dautrich Caniuse hatte ich damals konsultiert, ehe ich die media queries ausprobiert hatte. Caniuse ist nach meiner Erfahrung nicht zuverlässig, was Mobilbrowser betrifft.

markowski Danke für deinen Hinweis. An die Höhe hatte ich bei den media queries bisher nicht gedacht. Um möglichst jetzt schon eine Lösung zu erhalten, habe ich eine zusätzliche query eingefügt und zudem in YooTheme die Positionierung des Signets geändert auf "sticky when scrolling up". Dies gilt dann allerdings für alle Geräte und Portrait- sowie Landscape-Darstellung. Konkret ist das Signet beim Aufbau der Webseite oben positioniert. Scrollt man nach unten, verschwindet das Signet zusammen mit dem Inhalt der Seite nach oben. Sobald man auch nur ein bisschen wieder nach oben scrollt, schiebt sich das Signet wieder an die normale Position.

Die dank deines Tipps zusätzliche Query verringert die Breite und Höhe des Signet abhängig davon, ob bei einem bestimmten Bereich der Screenwidth eine bestimmte Höhe nicht überschritten wird:

.uk-logo img {
    @media screen and (min-width: 641px) and (max-width: 960px) and (min-height: 500px) {
    width: 60vw !important;
	min-width: 400px;
    max-width: 500px;
	margin: 10px 0 6px 5px !important;}
}
.uk-logo img {
    @media screen and (min-width: 641px) and (max-width: 960px) and (max-height: 499px) {
    width: 41vw !important;
	min-width: 200px;
    max-width: 350px;
	margin: -12px 0 -12px 5px !important;}
}

Dank dieser Lösung ist es mir nicht mehr so wichtig, das Signet immer sticky zu halten, ausgenommen bei Smartphone im Querformat.

Danke an alle, die mir hier geholfen haben bzw. Hinweise gegeben haben!