Probleme mit dem Design bei Drehen auf Handy oder Tablet

Diskutiere Probleme mit dem Design bei Drehen auf Handy oder Tablet im CSS Forum im Bereich Programmierung; Servus Freunde. Ich hab ne neue Webseite angefangen. www.adrian-thommes.de die ist ganz am Anfang. Aber wenn ich Sie drehe (auf Handy oder...
S

Sempervivum

Well-known member
Beiträge
280
Punkte Reaktionen
43
Wie ist die Seite denn entstanden? Hast Du sie selbst entwickelt oder ist es ein Template?

Ich kann das Problem bei einer Breite von um die 780px reproduzieren. Es liegt daran, dass das nav.navbar ein position: fixed; hat und dadurch aus dem Fluss heraus genommen wird. Beheben kann ich es, wenn ich das postion: fixed; dort weg nehme und statt dessen dem Header ein position: sticky; und top: 0; gebe. Allerdings treten dann Probleme mit den Farben auf: Der Header wird weiß.
 
S

Snake20x

Member
Beiträge
15
Punkte Reaktionen
0
Das ist ja schonmal ein Anfang. Vielen lieben dank. Ja es ist ein Template aber der Creator scheint es nicht mehr zu geben! Ich reproduziere das mal, und schau mal, warum der Header sich dann umfärbt.
Aber danke schonmal für die schnelle Antwort.
 
S

Snake20x

Member
Beiträge
15
Punkte Reaktionen
0
Die Problematik hab ich nun gesehen. Ebenso fährt die .Navbar dann auch nicht mehr mit runter.
Ich frag mich wenn die breite doch auf 100% steht

header .navbar-expand {
position: fixed;
top: 0;
z-index: 2;
width: 100%;
padding: 20px 25px;
pointer-events: initial;

Wieso er nicht 100% macht...
Hmmm ;-(
 
S

Sempervivum

Well-known member
Beiträge
280
Punkte Reaktionen
43
Ich frag mich wenn die breite doch auf 100% steht

...

Wieso er nicht 100% macht...
Ich nehme an, das bezieht sich jetzt auf das Problem mit den weißen Rändern links und rechts? Das konnte ich leider überhaupt nicht reproduzieren, weder auf meinem Handy noch in der Handy-Ansicht der Entwicklerwerkzeuge.
 
S

Snake20x

Member
Beiträge
15
Punkte Reaktionen
0
Also wenn ich auf die Seite gehe im Hochformat... Und dann drehe... Kommen die weißen Ränder. Warte ich mal mal ein Bild.
Das kuriose ist. Auf meinem iPhone 13 ist das Problem. auf meinen iPad mini und iPad Pro nicht.

Wenn ich im Firefox Developer schaue, und jegliche pixel durchgehe, sehe ich es auch nicht.
Was halt irgendwie verwundert.

Und wie du im Bild siehst schiebt er es oben in den Header rein.


Grad noch auf dem Samsung Handy meiner Frau probiert. Da sind keine weiße Balken aussen.
 

Anhänge

  • IMG_4239.PNG
    IMG_4239.PNG
    2,6 MB · Aufrufe: 6
S

Sempervivum

Well-known member
Beiträge
280
Punkte Reaktionen
43
Auch wenn ich vom Hoch- ins Querformat drehe, tritt das Problem auf meinem Handy nicht auf. Vermute, nur bei bestimmten Abmessungen des Anzeigebereichs.
 
S

Snake20x

Member
Beiträge
15
Punkte Reaktionen
0
Ja bei meiner Frau auch nicht. hab ich grad getestet. Und auf dem iPad mini auch nicht.
Hmmmm.
 
S

Snake20x

Member
Beiträge
15
Punkte Reaktionen
0
Aber das Problem das er das Bild "hinter" den Header stellt, macht er auf dem iPad mini auch!
Am besten zu testen auf einer Unterseite: Menü / Hüpfburgen & Eventmodule
 
S

Sempervivum

Well-known member
Beiträge
280
Punkte Reaktionen
43
Was die weißen Ränder betrifft: Dann hat man natürlich schlechte Karten, den Fehler zu finden. Ich sehe noch zwei Möglichkeiten:
  • Hast Du auch einen Mac? Dann könntest Du die Entwicklerwerkzeuge von Apple verwenden um den Fehler zu suchen.
  • Versuche, entweder mit farbigen Rändern oder Hintergrundfarben die einzelnen Container sichtbar zu machen.
 
S

Snake20x

Member
Beiträge
15
Punkte Reaktionen
0
Das ist mal eine gute Idee. Da werd ich mich gleich mit beschäftigen. Vielen lieben dank für deine Zeit.
Ich geb feedback wenn ich es gefunden habe.
 
basti1012

basti1012

Well-known member
Beiträge
220
Punkte Reaktionen
16
Ich habe im Hintergrund auch versucht den Fehler irgendwie nachzustellen / zu finden , aber nicht geklappt.

Es gibt online ja auch viele Webseiten Tester mit verscheide Endgeräte.
Der ist ganz gut https://www.lambdatest.com/ , leider nur bis iPhone 12pro.
Wer mehr(iPhone 13 und so)will, muss zahlen.
Habe aber alles Mögliche an Endgeräte getestet und habe den Fehler nicht hinbekommen.
Hast du mal versucht auf den iPhone ein anderer Browser zu testen , ob es da auch noch so ist.

Das ein einziges Handy nur das Problem hat , kommt mir schon etwas merkwürdig vor. Das Endgerät und Browser ihre eigenen Macken haben kennen wir ja, aber so Speziell auf ein einziges Gerät hatte ich auch noch nie.
 
S

Snake20x

Member
Beiträge
15
Punkte Reaktionen
0
Ja hab Opera GX probiert. Fehler der gleiche. Dachte auch okay vielleicht nur Safari aber anscheinend doch genau die Größe. Grad noch Chrome und Firefox probiert. Genau die gleichen Balken und das Bild nach oben verzogen in den Header!
 
S

Snake20x

Member
Beiträge
15
Punkte Reaktionen
0
@basti1012 guck mal ich hab mal den Lambdatest.com getestet. Ich kannte das nicht. Die Balken sind nicht zu reproduzieren aber
das mit dem Logo oben in den Header seh ich da auch.
Guck mal Screenshot.
 

Anhänge

  • IMG_4244.png
    IMG_4244.png
    2,2 MB · Aufrufe: 5
basti1012

basti1012

Well-known member
Beiträge
220
Punkte Reaktionen
16
Das mit dem Bild hinter dem Header sehe ich auch, sogar im Browser bei bestimmten Größen.
Eigentlich möchte ich mich da jetzt nicht weiter mit einmischen.
Erstens hilft dir schon einer der besten.
Dann nutzt du Bootstrap , das hasse ich wie die Pest.
Ich verstehe einfach nicht, was Bootstrap da für einen Mist macht.

Lösche ich zb den Wert
Code:
.p-0 {
    padding: 0 !important;
}
Sieht es eigentlich gut aus.
Doch das kann nicht alleine die Lösung sein.

Auch deine CSS
Code:
body .slider-h-100 {
    height: calc(100vh - 50px);
}
holt bei Löschen der CSS das Bild auch ein Stück runter

Wie gesagt ich kann da sowieso nicht richtig helfen bei weil Bootstrap mein Hass Kandidat ist.
Noch komischer ist es das ich meine devtools nicht resizen kann. Das bleibt einfach 400px ca. auf .
Ich kann da nicht mehr richtig debuggen mit und die Webseiten Seite geht somit auch nicht mehr größer und kleiner.
Sowas hatte ich auch noch nie.

Ich denke mal das @Sempervivum dir bei dem Bild unter dem Header besser helfen kann .
Obwohl ich nicht weiß, wie fit er bei Bootstrap ist.

Bei dem anderen Problem mit dem weißen Rand rechts und links wird es schwerer werden.
Das Problem ist, dass man den Fehler selber sehen muss, um richtig debuggen zu können.

Ich weiß nicht, ob das geht ,
kannst du mit dem Problem iPhone die Webseite kopieren?
Wenn ja, versuch mal den kopierten Code bei codepen.io reinzukopieren und mit einen anderen Gerät wieder zu öffnen.
Falls der Fehler dann da zu sehen ist, hätte man vielleicht eine Chance.

Gibt es auf dem Handy sowas wie eine Konsole oder so?
Der Code, der im Inspektor angezeigt wird , der könnte vielleicht weiterhelfen.

EDIT;
Sehe gerade das Sempervivum dir sowas schon gesagt hatte, das du da selbe mal nach dem Fehler schauen kannst . Falls du ihn nicht findest dann Code kopieren
 
basti1012

basti1012

Well-known member
Beiträge
220
Punkte Reaktionen
16
Wenn du mal Lust hast, ändere mal deine meta Angabe.
Die hier
Code:
<meta name="viewport" content="width=device-width, initial-scale=1">
in das
Code:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Wenn es nichts an den weißen Balken ändert, dann tausche es wieder.
Hast du bei deinem iPhone auch öfters Probleme das nach hin und her drehen unten der weiße Balken ist?
Das nach Rotation Balken unten sind das ist schon bekannt , aber so wie du es hast konnte ich nichts zu finden
 
S

Snake20x

Member
Beiträge
15
Punkte Reaktionen
0
Wow erstmal vielen lieben Dank @basti1012 für deine Worte und deine Mühe, find es nicht selbstverständlich das du dir sooo viel Zeit nimmst, danach zu schauen,
und mir dann so einen Riesen Text dazu schreibst, obwohl du bootstrap auch noch hasst. DANKE DIR!
Ich werd mich gleich mal dran setzen und all die Tips versuchen.

Also das mit den Weißen Balken in der Drehung hatte ich noch nie. Und ich teste öfter Sachen auf dem handy. Deswegen hat es mich ja so gewundert warum es
das tut.

Klar ich verstehe, wenn man es nicht rekonstruieren kann, wie soll man es lösen?
Mit der Konsole auf dem Handy... Da schau ich gleich mal ob es Developer Tools fürs handy gibt!
Und wow... das war grad das erste: was ich getestet habe weil es schnell geändert ist:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Das löst die weißen Balken, ich habs jetzt nur auf dem Handy getestet, und geschaut ob es sonst noch wo Probleme macht. Aber
auf dem iPhone 13 Max. sind die weißen Balken weg.

Jetzt zieht er nur noch das Bild komplett in den Header.

Das in der CSS versteh ich halt nicht.
body .slider-h-100 {
height: calc(100vh - 50px);
}

Warum zieht das Template es 50px hoch?
Also das muss ja einen Grund haben oder? Man schreibt das ja nicht wenns keinen Sinn hat, so mein ist.

Bissl dumm programmiert, von dem Macher. Aber ich weiß nun warum der sich nirgends mehr meldet ;-(

ICH KANN NUR DANKE AN EUCH JUNGS SAGEN! ;-)

Wenn wir das Bild noch hoch bekommen, ich teste mal noch die zwei Sachen jetzt in der CSS, und gib Feedback ob es sonst keine Fehler auslöst.

DANKE EUCH ZWEI TROTZDEM SCHON MAL
 
S

Snake20x

Member
Beiträge
15
Punkte Reaktionen
0
@Sempervivum Das mit den Entwicklerwerkzeuge von Apple gestaltet sich genauso schwer wie mit Firefox Developer. Ich bekomm die Drehung nicht angezeigt.
Und somit entstehen die weißen Ränder nicht. ABER was ich rausgefunden habe ist, das es mehrere Wordpress Seiten gibt die das auch machen... Ich glaub das liegt an der "NODGE (heißt das so, da wo die Kameras sind)" von APPLE!
Viele Webseiten zeigen das weiße. nur bei vielen fällt es nicht auf, WEIL die Programmierer diese Felder in der gleichen Farbe einstellen wie die Webseite. Dann sieht man es nur wenn Bilder
100% Full sind. Das hab ich gefunden. Ich glaub aber langsam nicht mehr das es Container sind. Jedenfalls find ich keine Möglichkeit rauszufinden "OB" es welche sind. Und so weiß ich auch nicht wie
ich Sie färben soll :-(

@basti1012
Das mit dem Viewport hab ich mir genau angeschaut. Das funktioniert soweit SUPER. ABER Dadurch das die Webseite dann "komplett" ist, siehst an der Nodge den Text nicht mehr :-(
Mach ich den Text weiter weg vom Rand, sieht es im Hochformat komisch aus. :-/ Oh mann.

Ich glaub das färben ist da die richtige Lösung, aber ich hab gestern Abend 3-4 Stunden versucht rauszufinden "ob" oder welcher Container das ist. Ohne Erfolg. Dann könnte man es ja einfach Einfärben in Webseite Farbe.
Das wäre die Lösung glaube ich.
 
S

Snake20x

Member
Beiträge
15
Punkte Reaktionen
0
Sooo weitere Infos.
Das scheint ein iPhone 13 Problem zu sein.

Selbst Webseiten wie Audi.de und sogar Apple.de haben die Ränder.
Aber die färben Sie ein, das es nicht so "auffällt"

Hab mal ein Screenshot gemacht.
 

Anhänge

  • IMG_4245.PNG
    IMG_4245.PNG
    2,7 MB · Aufrufe: 2
Thema:

Probleme mit dem Design bei Drehen auf Handy oder Tablet

Oben Unten