nicht angemeldet
Verhalten von Desktop-Chrome beim Responsive-Test
Rolf B
Verhalten von Desktop-Chrome beim Responsive-Test
Rolf B
marctrix
HenryHallo alle,
wenn ich einer Seite beispielsweise body { min-width: 10em; } gebe, dann zeigt der Fuchs einen Scrollbar, wenn sie schmaler wird (bspw. wenn ich mit den Mobiltest-Tools der Entwicklerwerkzeuge den Screen schmal ziehe). Chrome (Version 76, Win10 1903) fängt an, die Seite zu verkleinern.
Beispiel - mit festen Pixeln um von Browsereinstellungen unabhängig zu sein
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-size: 20px;
min-width: 200px;
}
</style>
</head>
<body>
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</body>
</html
Unterschreitet die Breite 200px (plus X für Margins/Paddings), fängt Chrome an zu verkleinern. Der Fuchs zeigt dagegen einen Scrollbar, das halte ich für richtig.
Was muss ich tun, damit Chrome nicht zoomt? Hat jemand einen Tipp?
Rolf
--
sumpsi - posui - clusi
sumpsi - posui - clusi
-
Hej Rolf,
Beispiel - mit festen Pixeln um von Browsereinstellungen unabhängig zu sein Unterschreitet die Breite 200px (plus X für Margins/Paddings), fängt Chrome an zu verkleinern. Der Fuchs zeigt dagegen einen Scrollbar, das halte ich für richtig.
Richtig oder falsch halte ich für wenig wichtig. Mag sein, dass die Anwendung das eine oder andere Verhalten nötig macht, dann würde ich das sicherstellen. Ansonsten verhalten sich Browser halt in mancherlei Hinsicht unterschiedlich und ich würde dazu raten, das nicht zu unterbinden. Nutzer gewöhnen sich an das Standard-Verhalten ihres Browsers und schätzen ihn vielleicht gerade deswegen.
Daher würde ich das nur ändern, wenn du das unbedingt benötigst.
Was muss ich tun, damit Chrome nicht zoomt? Hat jemand einen Tipp?
Da du eine bestimmte Mindestbreite wünschst, würde ich ab dieser Breite einen Breakpoint setzen und mittels CSS festlegen, dass dann scrollbalken erscheinen.
Marc
--
Ceterum censeo Google esse delendam-
Hallo Marc,
danke für den Tipp, aber...
Ich habe ja eine min-width für den body festgelegt. Damit sollten die Scrollbalken meiner Meinung nach automatisch kommen - im Fuchs ist es so, und ich meine mich zu erinnern, solches Verhalten früher auch schon in Chrome gesehen zu haben.
Es tritt nicht im Desktop-Modus auf, sondern nur im Mobil-Emulationsmodus, den man über die Entwicklerwerkzeuge einschalten kann. Setzen von overflow:scroll ändert nichts daran, demnach glaube ich, dass mir deine Idee nicht weiterhilft.
Eigentlich wollte ich ja nur das Verhalten der Seite beim Unterschreiten der Mindestbreite testen. Ich muss das mit der Mobil-Emulation machen, weil der Desktop-Browser sein Fenster auf mindestens 500px festlegt. Und statt den Scrollbar zu zeigen, verkleinert Chrome die Darstellung.
Im Desktop-Modus kommen Scrollbalken, das erkenne ich, wenn ich die min-width auf 600px setze. Es ist nur in der Mobil-Emulation. Was noch testen müsste, ist, ob es auch in einem echten Mobil-Chrome so ist, also: Ist es ein Emulationsbug oder ein nerviges Mobilfeature?
Rolf
--
sumpsi - posui - clusi-
Hallo Ingrid,
die Lösung heißt minimum-scale=1 in der meta name="viewport" Angabe...
Rolf
--
sumpsi - posui - clusi-
Hej Rolf,
die Lösung heißt minimum-scale=1 in der meta name="viewport" Angabe...
Für eine echte Website würde ich das nciht machen. dass Webseiten sich vergrößern lassen müssen, weiß ja fast jeder. Aber auch Verkleinerungen sind wichtig für menschen mit Tunnelblick. Menschen die nur ein sehr kleines Gesichtsfeld haben, möchten in diesem möglichst viel sehen und verkleinert daher Texte, die ihnen zu groß sind…
Ich hoffe, jemand hier kann das mal auf einem echten Androiden testen, sonst kommen wir nicht weiter.
Bessere Ergebnisse könnte der Simulator beisteuern, den man sich (früher habe ich das mal gemacht) installieren kann. Der emuliert dann Android-Geräte, auf denen man echte Apps laufen lassen kann. das ist aber Aufwand und ich weiß nicht, was dabei raus kommt. Früher habe ich das mal verwendet, ist aber schon eine Weile her. Hatte das unter macOS im Einsatz, über die Windows-Version kann ich nichts sagen.
Marc
--
Ceterum censeo Google esse delendam
-
-
Hallo Rolf,
Es tritt nicht im Desktop-Modus auf, sondern nur im Mobil-Emulationsmodus, den man über die Entwicklerwerkzeuge einschalten kann. Setzen von overflow:scroll ändert nichts daran, demnach glaube ich, dass mir deine Idee nicht weiterhilft.
Das ist immer so eine Sache... Mir ist noch keine geeignete mobile Simulation untergekommen, die 100% der Realität entspricht. Da spielen wesentlich mehr Faktoren eine Rolle, als man voraussehen kann. Oft hilft nur ein Test mit den entsprechenden Geräten und selbst da ist das je nach Einstellungen, Versionen unterschiedlich.
Gruss
Henry--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ -
Hej Rolf,
danke für den Tipp, aber...
Das habe ich befürchtet. Leider habe ich keinen mobilen Chrome zum testen.
browsershots.org und ähnliche Dienste kennst du?
Ansonsten kann ich da leider derzeit nicht mehr zu beitragen…
Marc
--
Ceterum censeo Google esse delendam-
Hallo marctrix,
ok, konnte das jetzt machen. Mein Smartphone hat 320px horizontal, habe also mit 400px getestet.
Mit minimum-scale=1 wurde nicht verkleinert und die Anzeige war 400px breit (habe zum Messen eine div-Leiste hinzugefügt).
Ohne minimum-scale wurde erstmal in gefordertem initial-scale gezeigt, das konnte ich zusammenschieben so dass alles sichtbar war. Diese Einstellung hat er sich hartnäckig gemerkt, ich musste das Browsertab schließen und die Testseite neu aufrufen.
D.h. mein Emulator im Desktop-Chrome ist ggf. merkwürdig. Jedenfalls habe ich wieder mal was gelernt 😀
Rolf
--
sumpsi - posui - clusi-
Hej Rolf,
D.h. mein Emulator im Desktop-Chrome ist ggf. merkwürdig. Jedenfalls habe ich wieder mal was gelernt 😀
Ich auch. Danke fürs Teilen!
Marc
--
Ceterum censeo Google esse delendam
-
-
-
-