Opera-Mobilansicht nicht wie Original

[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