Mediaanweisung Smartphone Mobirise4

Allgemeine Fragen
Benutzeravatar
struggle
Mitglied (Level 9)
Mitglied (Level 9)
Beiträge: 89
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Mediaanweisung Smartphone Mobirise4

Ungelesener Beitrag von struggle »

Hallo,

damit mein Cookiebanner auch auf dem Smartphone richtig erscheint, habe ich diese Medianweisung

Code: Alles auswählen

    /* Media-Anweisung bis 767px Breite von 100% */
    @media (max-width: 767px) {
        div#dsgvo_hinweis {
            bottom: 0px;
            left: 0%;
            width: 100%;
        }
    }
eingefügt.

Es sieht "hochkant" am Smartphone richtig aus

media01.jpg

bei "quer" sieht es aber komisch aus

media02.jpg

Mein Smartphone hat eine Größe von
Zoll 6,43
1080 x 2400 pixel

Was kann ich noch machen, daß es richtig aussieht? Kann bitte jemand noch mal drüber gucken?
http://www.immo4live.de
Gruss
struggle
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3916
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mediaanweisung Smartphone Mobirise4

Ungelesener Beitrag von Tommy Herrmann »

... ich bin gerade nur am Handy und kann erst wieder morgen helfen.

Bei mir sitzt das unten an der Kante, auch im Querformat - also genau richtig und so wie in der Media-Anweisung auch eingetragen.

Lösche mal den Cache vom Handy-Browser, daran liegt das bei Dir.

Das macht man unter den "Einstellungen" vom Browser. Wie man das macht, hatte ich Dir hier beschrieben:

viewtopic.php?p=9432#p9432

Das gesamte Fenster ist inzwischen auch ziemlich hoch geworden und verdeckt daher den gesamten Bildschirm im Querformat am Handy. Das <h1> Tag für den Titel ist vielleicht dann auch etwas zu groß, versuche mal <h2> oder <h3> oder nur Fettschrift.

Dann braucht es eigentlich auch nicht den "Impressum" Button - da geht es doch nur um den Datenschutzhinweis. Der Link zum Impressum hat dort auch absolut nichts zu suchen, denn das Impressum muss jederzeit erreichbar und sichtbar sein und nicht in einem Cookie-Hinweis, den man nie wieder sieht, wenn dieser bestätigt wurde.


2023-01-26-Samsung-Internet.jpg
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3916
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mediaanweisung Smartphone Mobirise4

Ungelesener Beitrag von Tommy Herrmann »

Vielleicht ist die Auflösung an Deinem Handy aber auch so viel größer, dass Du mal diese Media-Anweisung versuchen solltest - also anstelle von 767px dann 991px. Dann gilt diese Anweisung eben schon unter einer Display-Breite von 992px.

Code: Alles auswählen

    /* Media-Anweisung bis 991px Breite von 100% */
    @media (max-width: 991px) {
        div#dsgvo_hinweis {
            bottom: 0px;
            left: 0%;
            width: 100%;
        }
    }
Benutzeravatar
struggle
Mitglied (Level 9)
Mitglied (Level 9)
Beiträge: 89
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Mediaanweisung Smartphone Mobirise4

Ungelesener Beitrag von struggle »

Hallo Tommy,
besten Dank für die Antworten.

Zum Impressum, das habe ich nur deshalb so gemacht, damit es jederzeit erreichbar ist, denn das ist es ja nicht, da der Bildschirm insgesamt "abgedunkelt" ist. Aber ich werde es noch mal überdenken, da die Pflicht zur Erreichbarkeit wohl nur für gewerbliche Seiten, insbesondere für Händler, gilt.

Das mit der Pixelbreite nehme ich noch Mal in Angriff, wobei ich diese Anweisung nicht so ganz verstehe, denn ich habe ja an meinem Handy 1080 x 2400. Ich werde dann berichten.
Gruss
struggle
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3916
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mediaanweisung Smartphone Mobirise4

Ungelesener Beitrag von Tommy Herrmann »

gucke mal hier:

https://www.w3schools.com/howto/howto_j ... window.asp

... und rufe mal diese Seite von mir mit Deinem Handy auf.

Gleich unter dem Bild "Voher/Nachher" zeigt es Dir dann Deine Display-Breite an:

https://www.mobirise-tutorials.com/Test ... content7-y

Das sind dann die Seitenverhältnisse und nicht die Auflösung. Wie das genau berechnet wird kann ich auch gerade nicht erklären.

Gucke Dir auch mal diese sogenannten "Breakpoints" ("Haltepunkte") für die Media-Anweisungen von "Bootstrap" hier an:

https://getbootstrap.com/docs/5.0/layout/breakpoints/

Meine Bildschirm-Auflösung am Handy ist auch:

2.340 x 1.080 (Full HD) - "Samsung Galaxy S 22"

... und die Display-Breite dann 360px im Hochformat - darauf bezieht sich die Media-Anweisung in der CSS - siehe Screenshot:


Samsung Galaxy S22 Display-Breite.jpg


... und 705px im Querformat:


Samsung Galaxy S22 Display-Breite-Quer.jpg
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3916
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mediaanweisung Smartphone Mobirise4

Ungelesener Beitrag von Tommy Herrmann »

Bildschirmbreite anzeigen

Falls das jemand einbauen will:

Ich habe dazu dieses Script erstellt und in die Seiteneinstellungen in den Bereich "End of <body> code" kopiert:

Code: Alles auswählen

<script>
        document.getElementById("xx").innerHTML = window.innerWidth + " Pixel";
        window.addEventListener("resize", function () {
         document.getElementById("xx").innerHTML = window.innerWidth + " Pixel";
        });
</script>
Dann habe ich auf die im Script verweisende id="xx" so in meinem Mobirise-Block anzeigen lassen:

<span id="xx"></span>
Benutzeravatar
struggle
Mitglied (Level 9)
Mitglied (Level 9)
Beiträge: 89
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Mediaanweisung Smartphone Mobirise4

Ungelesener Beitrag von struggle »

Ich habe das Mal auf Deiner Seite getestet, er sagt mir 393px x 776px

Somit habe ich die 767px lt. Media-Anweisung knapp überschritten.
Gruss
struggle
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3916
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mediaanweisung Smartphone Mobirise4

Ungelesener Beitrag von Tommy Herrmann »

Die Media-Anweisung bezieht sich hier auf die Breite und dann stimmt das bei Dir nur im Hochformat:

Code: Alles auswählen

   /* Media-Anweisung bis 767px Breite von 100% */
    @media (max-width: 767px) {
        div#dsgvo_hinweis {
            bottom: 0px;
            left: 0%;
            width: 100%;
        }
    }

max-width = auf Deutsch = maximale Breite


Wird die Höhe vom Handy zur Breite, wenn Du es in das Querformat drehst, dann wird es wohl nicht mehr stimmen.

Verwende dann mal lieber meinen 2. Vorschlag mit 991px, wie bereits oben beschrieben:

Code: Alles auswählen

    /* Media-Anweisung bis 991px Breite von 100% */
    @media (max-width: 991px) {
        div#dsgvo_hinweis {
            bottom: 0px;
            left: 0%;
            width: 100%;
        }
    }
Eigentlich könntest Du da jede beliebige Breite in Pixeln eintragen, ich bleibe aber immer bei den vorgegebene "Breakpoints" von "Bootstrap" - und der nächste wäre dann eben 991px.

Vergiss nicht den Cache am Handy zu löschen.

Meist reicht es nicht, die Seite einfach neu zu laden.
Benutzeravatar
struggle
Mitglied (Level 9)
Mitglied (Level 9)
Beiträge: 89
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Mediaanweisung Smartphone Mobirise4

Ungelesener Beitrag von struggle »

Jetzt stimmt es :tu:

Dankeschön
Gruss
struggle
Benutzeravatar
struggle
Mitglied (Level 9)
Mitglied (Level 9)
Beiträge: 89
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Mediaanweisung Smartphone Mobirise4

Ungelesener Beitrag von struggle »

Hallo Tommy,

den Impressum-Button habe ich entfernt und damit die Überschrift kleiner wird habe ich <h1> in <h2> geändert.

Um noch mal auf Deine Aussage einzugehen:
Tommy Herrmann hat geschrieben: Mi 25. Jan 2023, 19:04 Dann braucht es eigentlich auch nicht den "Impressum" Button - da geht es doch nur um den Datenschutzhinweis. Der Link zum Impressum hat dort auch absolut nichts zu suchen, denn das Impressum muss jederzeit erreichbar und sichtbar sein und nicht in einem Cookie-Hinweis, den man nie wieder sieht, wenn dieser bestätigt
Beim Impresum-Button ging es darum, wer verantwortlich für die Webseite ist und nicht um den Datenschutzhinweis. Der hat ja einen eigenen Button. Nun gibt es unzählige Webseiten im Netz, wo ein Impressum-Link in das Cookie-Banner integriert ist.
Wenn man meinen Cookie-Hinweis bestätigt, sieht man diesen Link natürlich nicht mehr, aber auf der Webseite gibt es ein dann anklickbares Impressum. Der Link zum Impressum ist nicht der gleiche Link wieder der auf der Webseite.

Nun habe ich den Link im Text untergebracht

http://www.immo4live.de
Gruss
struggle
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3916
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mediaanweisung Smartphone Mobirise4

Ungelesener Beitrag von Tommy Herrmann »

... ich finde es so besser :tu:
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste