Opera-Mobilansicht nicht wie Original

[Wishpacker]

Hallo Zusammen!

ich habe mir ein Joomla-Template gekauft, das responsiv ist. Nun möchte ich ein paar CSS-Regeln für die Mobilansicht erstellen. Bei den Entwicklertools von Opera gibt es ja diesen Button für die Mobilansicht, aber ich weiß nicht wie es funktioniert. Ich habe ein Xiaomi Redmi 10 2022. Laut Google hat es eine Auflösung von 1080 x 2400. Wenn ich das oben eingebe, sieht es folgendermaßen aus:

Wenn ich meine Webseite mit dem Handy aufrufe, sieht sie so aus:

Was mache ich falsch?

[Rolf B]

Hallo Wishpacker,

Was mache ich falsch?

(1) Du postest die URL deiner Seite nicht. Damit können wir nicht prüfen, ob es vielleich einen Fehler bei den Basics für Responsivität gibt. Aber man erkennt es ja im Screenshot:

https://wishpacker.lima-city.de/Joomla/

Die wichtigste Grundlage ist drin: meta viewport. ✔️

(2) Du berücksichtigst das Verhältnis Gerätepixel zu CSS Pixel nicht. Die physikalische Auflösung ist nicht das, was das Gerät dem Browser präsentiert. Das hat praktische Gründe - eine X-Auflösung von 1080 würde bei den Webseiten, die nicht auf diese Auflösungen vorbereitet sind, dazu führen, dass sie unlesbar klein dargestellt werden. Würden wir alle das tun, was Selfhtml seit Jahren predigt, nämlich px vergessen und alles in em angeben, dann bräuchte man keine CSS-Pixel und kein device-pixel-ratio.

Ruf mal den hier auf: http://whatismyscreenresolution.net/

Wenn das, was ich so zum Mi 10 finde, stimmt, sollte das 383×851 ergeben, die Xiaomi Geräte haben ein krummes Device-Pixel Verhältnis (2.75:1 steht hier). Hallo Nix, jetzt darfst Du feiern!

Wenn ich 383x851 in den Chrome DevTools einstelle, sieht deine Seite in etwa so aus wie dein Handy-Screenshot.

Rolf

[Wishpacker]

Hallo Rolf,

(1) Du postest die URL deiner Seite nicht. Damit können wir nicht prüfen, ob es vielleich einen Fehler bei den Basics für Responsivität gibt.

Aber ich habe meine URL oben in das Feld geschrieben. Keine Ahnung, warum man das nicht sieht.

Die physikalische Auflösung ist nicht das, was das Gerät dem Browser präsentiert.

Und deshalb sollte ich immer nach dem Viewport schauen und nicht nach der Auflösung?

Der Viewport ist beim Mi 10 ja 393 x 851. Wie kommst du jetzt auf 383x851?

[Rolf B]

Hallo Wishpacker,

wenn man weiß, wo man gucken muss…

Ich habe nach dem roten gesucht (habe ich jetzt nachgetragen). Der Eintrag unter "Homepage" versteckt sich hinter dem gelb markierten Kettenglied, das habe ich übersehen.

Wie kommst du jetzt auf 383x851?

Ja, mal gucken was die BOFH-Ausredenliste hergibt.

Das muss eine falsch gelegte Schleife im Flux-Kondensator^[1] gewesen sein. Natüüüürlich ist es 393, ich würde Dir doch nieee 10 Pixel klauen. Schon gar nicht CSS Pixel!

Also - ja - in den Dev-Tools musst Du die Viewportgröße in CSS-Pixeln angeben.

Rolf

---

1. Jawohl, KONDENSATOR. Nicht Kompensator, wie diese Übersetzungstrolle es in der Syncro von BTTF verbockt haben! ↩︎

[Wishpacker]

Hallo Rolf,

Wenn ich dich richtig verstanden habe, muss ich doch einfach nur mit meinem Handy auf http://whatismyscreenresolution.net/ gehen und das was da steht in die Entwicklertools eingeben? Bei mir steht da 393 x 873 aber wenn ich das in die Entwicklertools eingebe, sieht es immer noch anders aus, als auf dem Handy.

[Rolf B]

Hallo Wishpacker,

es kommt der Sache aber schon deutlich näher, oder?

Eine pixelidentische 1:1 Abbildung dürfte schwierig herzustellen sein. Die Schriften können abweichen, die Schriftgrößen, vielleicht auch ein paar Margins oder Paddings von Standardelementen. Das müsstest Du dann mühsam vergleichen.

Kannst Du die Darstellung auf deinem Handy remote debuggen? Zumindest mit Chrome für Android geht das (das Handy muss dann im Entwicklermodus sein). Dann kannst Du Dir anschauen, ob Default-Fontgrößen oder Schriftarten verschieden sind und versuchen, eine weitere Annäherung zu erreichen.

Pixelidentität herstellen zu wollen ergibt aber keinen Sinn. Denn Du willst deine Website ja nicht für Dein Handy optimieren. Responsiv heißt: mit jeder Viewportgröße sauber umgehen zu können. Sieh die Abweichung daher als "Testgerät Nr. 2" an. Dein Handy ist Testgerät Nr. 1.

Rolf

[Wishpacker]

Hallo Rolf,

Wenn du sagst ich habe es korrekt eingestellt, muss ich jetzt wohl lernen, wie man damit weitermacht. ;)

Das erste was mir auffällt, wenn ich die beiden Screenshots vergleiche ist: In den Entwicklertools beginnt das Suchfeld viel weiter links und der Suchbutton ist noch in der selben Reihe. Wenn solche Abweichungen "normal" sind, wie stylt man sich dann da etwas schönes zusammen?

Jetzt muss ich doch mit @media weitermachen, richtig? Sonst verändert es mir ja wieder die Desktopansicht?

Vielleicht hast du mir ja was zum lesen oder ein Video, wo genau solche Anfängerfragen geklärt werden. ;)

[Matthias Scharwies]

Servus!

Jetzt muss ich doch mit @media weitermachen, richtig? Sonst verändert es mir ja wieder die Desktopansicht?

Vielleicht hast du mir ja was zum lesen oder ein Video, wo genau solche Anfängerfragen geklärt werden. ;)

im SELF-Wiki: CSS/Media_Queries

Herzliche Grüße

Matthias Scharwies

[Wishpacker]

Das erste was mir auffällt, wenn ich die beiden Screenshots vergleiche ist: In den Entwicklertools beginnt das Suchfeld viel weiter links und der Suchbutton ist noch in der selben Reihe. Wenn solche Abweichungen "normal" sind, wie stylt man sich dann da etwas schönes zusammen?

Das habe ich tatsächlich noch nicht verstanden: was kann ich da jetzt machen? Ich kann ja nur mit den Entwicklertools arbeiten und da gefällt mir das Ergebnis und am Handy nicht. Rolf hat ja gesagt gesagt, die Entwicklertools kann man nicht genauer einstellen und über das Handy kann ich ja nicht meine Webseite stylen?

[Matthias Scharwies]

Servus!

Das erste was mir auffällt, wenn ich die beiden Screenshots vergleiche ist: In den Entwicklertools beginnt das Suchfeld viel weiter links und der Suchbutton ist noch in der selben Reihe. Wenn solche Abweichungen "normal" sind, wie stylt man sich dann da etwas schönes zusammen?

Das habe ich tatsächlich noch nicht verstanden: was kann ich da jetzt machen? Ich kann ja nur mit den Entwicklertools arbeiten und da gefällt mir das Ergebnis

Ja, aber die Ansicht in den Entwicklertoos ist eben nicht die „echte“. Vorteil der Entwickleransicht am Desktop ist eben, dass du mit der Maus ein Element auswählst, dort nach den entsprechenden CSS-Eigenschaften schaust und dann dort die Werte so lange veränderst, bis du glücklich bist. Dann kannst du die Werte in das Stylesheet deiner Webseite kopieren und überprüfen, ob das Ergebnis immer noch gut aussieht.

Da testet man als Profi aber eben nicht mit nur einem Handy, sondern mit dem iPhone 14 des Teenages, dem iPhone 6 der Oma, mit Samsung und mit dem Tablet ...

und am Handy nicht. Rolf hat ja gesagt gesagt, die Entwicklertools kann man nicht genauer einstellen und über das Handy kann ich ja nicht meine Webseite stylen?

Jetzt musst du eben zweigleisig arbeiten:

Test-Installation (nie mit der „echten“ Webseite arbeiten) ins Netz stellen und

• sowohl mit Entwicklertools am Desktop
• als auch mit „richtigem“ Handy

öffnen.

Was sieht im richtigen Handy blöd aus? Wähle dieses Element im Seiteninspektor des Desktops aus und verändere die Werte. Leider musst du jetzt raten, was denn am Handy falsch gelaufen ist, und die Werte ausprobieren, speichern und die Seite am Handy neu aufrufen und laden - möglichst im Inkognito-Modus, um Cache zu verhindern.

Früher (TM) konnte man nur so debuggen.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Ja, aber die Ansicht in den Entwicklertoos ist eben nicht die „echte“.

Nee, überhaupt nicht. Chrome ist z.B. ziemlich bescheuert - da hab ich mir schon die Augen ausgesucht, warum eine bestimmte Seite im Wiki in den Dev-Tools zerrissen wurde.

Was sieht im richtigen Handy blöd aus? Wähle dieses Element im Seiteninspektor des Desktops aus und verändere die Werte.

Chrome bietet auch remote debugging auf einem per USB angeschlossenen Handy an. Firefox kann das meines Wissens auch. Da Opera mittlerweile ein Chrome-Abkömmling ist, sehe ich gute Chancen, das auch dort machen zu können.

Voraussetzung: Das Handy muss im Entwicklermodus sein (bitte für das jeweilige Handymodell das richtige Vorgehen selbst suchen).

Man muss also längst nicht immer mit try+error arbeiten.

Aber, wie gesagt: man kann solche Ungenauigkeiten auch als Chance begreifen. Die Seite muss bei jeder Auflösung (in vernünftigen Grenzen) gut aussehen. Bei Smartwatches kann es kompliziert werden – da kann es nötig sein, nur einen Link anzuzeigen, der zur Mikroversion der Seite führt, die eine andere Benutzerführung hat.

Rolf

[Matthias Scharwies]

Servus!

Chrome bietet auch remote debugging auf einem per USB angeschlossenen Handy an. Firefox kann das meines Wissens auch. Da Opera mittlerweile ein Chrome-Abkömmling ist, sehe ich gute Chancen, das auch dort machen zu können.

Voraussetzung: Das Handy muss im Entwicklermodus sein (bitte für das jeweilige Handymodell das richtige Vorgehen selbst suchen).

Man muss also längst nicht immer mit try+error arbeiten.

Ich habe das mal in das SELF-Wiki übertragen:

• Grundlagen/Webprojekte/testen #Debugging auf Mobilgeräten

Es fehlen aber noch Screenshots.

Aber, wie gesagt: man kann solche Ungenauigkeiten auch als Chance begreifen. Die Seite muss bei jeder Auflösung (in vernünftigen Grenzen) gut aussehen.

Ebent!

Bei Smartwatches kann es kompliziert werden – da kann es nötig sein, nur einen Link anzuzeigen, der zur Mikroversion der Seite führt, die eine andere Benutzerführung hat.

Ja!

Der Regen hat aufgehört - wir gehen jetzt Abendessen auf der Kirchweih!

Herzliche Grüße

Matthias Scharwies

[Wishpacker]

Hallo,

Ich hab mir jetzt mal extra den Google Chrome geholt um das mit dem Debuggen zu testen und es funktioniert. Aber es ist doch nicht der richtige Weg oder? Von wegen responsiv usw.

Ich stelle mir immer noch die Frage, wie ich mit meinem "Problemchen" jetzt umgehen soll bzw. wie man in der Regel damit umgeht. Einfach nach der Mobilansicht vom Desktop arbeiten und akzeptieren, dass die Webseite auf dem eigenen Handy kacke aussieht?

[Rolf B]

Hallo Wishpacker,

akzeptieren, dass die Webseite auf dem eigenen Handy kacke aussieht?

Nein, das sollst Du nicht akzeptieren. Wenn das passiert, ist deine responsive Gestaltung nicht in Ordnung.

Die DevTools bieten "freie" Mobilansichten, wo Du jede Breite auswählen kannst. Auch live per Maus verschieben. Da muss eben jede Breite irgendwie sinnvoll aussehen. Und dann sollte es auch auf deinem eigenen Mobilchen nicht zu sehr stinken.

Rolf

[Wishpacker]

Wenn das passiert, ist deine responsive Gestaltung nicht in Ordnung.

Da macht man einmal nicht haargenau das was im Tutorial steht, schon hat man den Salat. Ich habe die Pixel-Angaben in meiner CSS-Datei mal in EM umgerechnet. Nun passt es denke ich! ;)

Aber eins habe ich immer noch nicht verstanden:

Wie kommt man von 1080 x 2400 auf 393 x 873? Woher kann ich das wissen, ohne Seiten wie http://whatismyscreenresolution.net/ zu benutzen? Was muss ich rechnen?

[Rolf B]

Hallo Wishpacker,

Der Umrechnungsfaktor ist das devicePixelRatio.

Rolf

[Gunnar Bittersmann]

@@Wishpacker

Was muss ich rechnen?

Rechnen musst du da gar nichts.

Du vergrößerst die Viwportbreite und setzt den Breakpoint^[1] (Media-Query in em) an der Stelle, wo dein Layout für schmale Viewports nicht mehr gut aussieht und deins für breite Viewports schon gut aussieht.

🖖 Живіть довго і процвітайте

---

1. Falls du überhaupt einen Media-Query brauchst. Manche Layoutwechsel bekommt man mit CSS-Grid (oder Flexbox) auch ohne Media-Query hin. ↩︎