Browser skaliert nicht unter 400px?

151

Ich arbeite daran, ein flüssiges Stylesheet zusammenzustellen, und es funktioniert wunderbar. Eine Sache, die mir aufgefallen ist, ist, dass mein Browserfenster in Chrome nicht unter 400 Pixel verkleinert wird. Es bleibt einfach dort hängen und in FF stoppt es beim Verkleinern nur bei etwa 400 Pixel und öffnet dann eine horizontale Bildlaufleiste.

Wenn ich die Site auf meinem Telefon öffne, sieht sie bei etwa 320 Pixel perfekt aus, sodass ich weiß, dass sie kleiner als 400 Pixel ist.

Ich war neugierig, ob jemand wusste, ob dies eine Browser- / Desktop-Sache war oder ob ich mir etwas anderes als mein CSS ansehen sollte. Ich habe keine Deklarationen für die Mindestbreite, daher bin ich mir nicht sicher, was dies verursachen könnte.

Wieder auf dem Desktop wird es auf eine minimale Breite von ungefähr 400 Pixel verkleinert und stoppt, aber wenn ich es auf meinem Telefon öffne, skaliert es auf die Größe des Telefonbildschirms, der ungefähr 320 Pixel beträgt ... neugierig, warum es zumindest gewonnen hat Nicht auf 320px auf dem Desktop verkleinern.

-edit- Ich bin mir auch nicht sicher, ob dies wichtig ist, aber Opera erlaubt es, es auf so ziemlich nichts zu verkleinern ... Also funktioniert es mit Opera und nicht in Chrome oder FF ... irgendwelche Ideen?

Brodie
quelle
1
Ich erinnere mich, dass Chrome früher zu einem winzigen Ziegelstein zusammenklappbar war. Das ist also etwas, das absichtlich eingeführt wurde. In aktuellem Chrome wird das Fenster nur so klein wie die oberste Reihe von Symbolen. Durch das Ausblenden der Home-Schaltfläche oder der Erweiterungssymbole kann ich sie etwas verkleinern.
Mrtsherman
7
Dies wird etwas Spezifisches an Ihrem CSS und Markup sein. Ohne irgendetwas zu überprüfen, gibt es keine Frage. Das Schießen von Vermutungen im Dunkeln ist kein wirklich nützlicher Ansatz. In diesem Fall müssen Sie selbst debuggen.
Jared Farrish
3
Ja, ich bin mir ziemlich sicher, dass dies nur die buchstäbliche Mindestbreite des Browserfensters ist, genau wie die meisten Programme eine Mindestbreite haben, auf die die Größe geändert werden kann. Mein Chrome scheint nicht in der Lage zu sein, die Größe kleiner als ein 250px-Ansichtsfenster zu ändern.
Justisb
1
Chrome 33 hat es wieder auf 400px gesetzt
Sparkup
4
"Das wird etwas Spezifisches an deinem CSS und Markup sein" ... Ähm, nein, das war es eigentlich nicht.
Stijn de Witt

Antworten:

253

Chrome kann die Größe nicht horizontal unter 400px (OS X) oder 218px (Windows) ändern, aber ich habe eine wirklich einfache Lösung für das Problem:

  1. Docken Sie den Webinspektor rechts statt unten an
  2. Ändern Sie die Größe des Inspektorfensters - Sie können den Browserbereich jetzt wirklich klein machen (bis zu 0 Pixel).

Update: Mit Chrome können Sie die Inspektorfenster jetzt vertikal anordnen, wenn Sie rechts angedockt sind! Dies verbessert das Layout wirklich.

vertikale Panel-Layout-Einstellung

Die HTML- und CSS-Bedienfelder passen sehr gut und Sie öffnen sogar ein kleines Konsolenbedienfeld. Dadurch konnte ich vollständig von Firefox / Firebug auf Chrome umsteigen.

Inspektor rechts angedockt mit vertikalem Panel-Layout

Wenn Sie noch einen Schritt weiter gehen möchten, sehen Sie sich die Einstellungen des Webinspektors (Zahnradsymbol unten rechts) an und wechseln Sie zur Registerkarte Benutzeragent . Sie können die Bildschirmauflösung hier beliebig einstellen und sogar schnell zwischen Hoch- und Querformat wechseln.

Einstellungen für die Geräteauflösung

UPDATE : Hier ist ein weiteres wirklich cooles Tool, auf das ich gestoßen bin. http://lab.maltewassermann.com/viewport-resizer/

Oisin Lavery
quelle
1
+1 Der Inspektor ist dafür ideal, erlaubt sogar das Einstellen von User-Agent etc.
GDmac
2
Du bist der Mann. Und es ist noch einfacher, den kleinen Bildschirm zu debuggen, wenn es ein geeignetes großes Inspektorfenster gibt.
aebersold
1
Danke @aebersold Ja, es ist ein schöner Bonus, ein schönes großes Inspector-Fenster zu erhalten, wenn Sie an mobilen Layouts arbeiten.
Oisin Lavery
3
IMO sollte dies die akzeptierte Antwort sein. Die Idee ist einfach und brillant, und Ihr Hinweis über die Überschreibung der Metriken ist fantastisch. Und das Lesezeichen, mit dem Sie verlinkt haben!
Marlar
5
Jemand anderes konnte nicht herausfinden, wie man die Entwicklertools richtig andockt? stackoverflow.com/questions/10023640/…
Erti-Chris Eelmaa
36

Dies kann an den Addons liegen, die Sie in Ihrem Browser installiert haben. Entfernen oder verbergen Sie alle Addon-Symbole in der Symbolleiste und versuchen Sie, die Größe zu ändern. Wenn es Addons gibt, ändert der Browser nur die Größe der Adressleiste und hält die Addons sichtbar.

Update: 14.07.2013


Mit der neuesten Chrome-Version können Sie jetzt die Größe der Adressleiste ändern und die Addons werden automatisch ausgeblendet.

Chamika Sandamal
quelle
4
Wenn Addons vorhanden sind, ändert der Browser die Größe nur auf die Adressleistengröße und hält die Addons sichtbar. Ich hoffe du verstehst das. Dies ist keine Nebenwirkung von Addons. Wenn jedoch Addons installiert sind, kann der Browser die Größe nicht auf den Mindestwert ändern. wegen der Addon-Symbole neben der Adressleiste.
Chamika Sandamal
2
Das Entfernen aller Addon-Symbole in Chrome hat dies für mich nicht gelöst. Die Lösung von nayan9 hat es geschafft.
Andrew Shooner
31
Dies ist nicht die Antwort . Selbst wenn alle Addons / Erweiterungen deaktiviert sind, beträgt die Mindestbreite von Chrome immer noch 400 Pixel.
Oisin Lavery
4
@ChamikaSandamal es ist nicht korrekt. Das OP versucht, sein Fenster unter 400px zu skalieren. Dies ist in Chrome nicht möglich, da der Browser eine harte Mindestbreite von 400 Pixel hat. Der einzige Weg, um den Effekt zu erzielen, den das OP sucht, ist Sherpanauts Antwort. Ihre Antwort hilft dem Benutzer absolut nicht, sich der harten Mindestbreite von 400 Pixel anzunähern, nach der das OP nicht gesucht hat.
Fred Stevens-Smith
2
@ChamikaSandamal Während es für Sie funktioniert, funktioniert es nicht für den Rest von uns. Es ist nichts gegen dich. Es ist einfach so, dass diese Antwort das Problem für viele von uns nicht behebt.
DA.
19

Ich war ebenfalls ratlos, hatte aber eine einfache Lösung. Ich habe gerade eine HTML-Datei mit einem Link erstellt, um ein neues Fenster zu öffnen:

<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>

Dieses neue Fenster enthält nur die Adressleiste. Mit Chrome kann ich die Größe frei auf 111 x 80 ändern.

nayan9
quelle
1
LOL, rede über einen Hack, um eine einfache Sache zu machen
Otto
17

Die Lösung von nayan9 funktioniert hervorragend und kann in ein Lesezeichen eingefügt werden, ohne dass eine HTML-Datei erstellt werden muss. Erstellen Sie in Chrome ein neues Lesezeichen mit der folgenden URL:

javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();

Und geben Sie ihm den Namen "Open Small Window" oder ähnliches. Auf diese Weise können Sie Fenster ohne Größenbeschränkungen in Chrome problemlos öffnen. Beachten Sie, dass das Kopieren in Ihre Adressleiste nicht funktioniert - Chrome entfernt das "Javascript:".

drinkdecaf
quelle
Dies ist die Antwort, die für mich funktioniert hat. Nützlich, um Tweetdeck so klein wie möglich zu machen.
Krug
10

Falls Sie die Bildschirmbreite reduzieren möchten, um verschiedene Geräte zu emulieren (und warum sollten Sie dies sonst tun?):

Chrome hat jetzt einen Emulationsbereich in seinem Inspektor, der durch Klicken auf das kleine Telefonsymbol in der oberen Menüleiste (zwischen der Lupe und den Elementen) aktiviert wird:

Chrome-Emulationssymbol

Im Emulationsmodus können Sie die Größe des Ansichtsfensters unter anderem auf alle gängigen Bildschirmgrößen für Mobilgeräte einstellen, z. B. das Emulieren von Berührungen, die Geolokalisierung und sogar die Eingabe von Beschleunigungsmessern:

Geben Sie hier die Bildbeschreibung ein

gl03
quelle
Am beeindruckendsten ist, dass ich nichts über diese Funktion wusste ... endlich kann ich den User-Agent-Switcher loswerden und mobile Geräte richtig emulieren, danke !! +10 zu diesem
andreszs
Diese Funktion wurde ersetzt durch "Toggle Device Toolbar" stackoverflow.com/a/44194243/1175496
The Red Pea
6

Zusätzlich zu dem, was nayan9 und drinkdecaf gesagt haben, können Sie document.URL einfach in den Aufruf von window.open werfen, um die Seite anzuzeigen, die Sie gerade im 320-Fenster anzeigen. Wenn Sie eine Bildlaufleiste erwarten, möchten Sie möglicherweise die Breite erweitern.

javascript:(function(){window.open(document.URL, '','width=320,height=480');})();
nils
quelle
3

Die DevTools in Chrome haben sich seit dem Zeitpunkt, an dem die meisten dieser Antworten veröffentlicht wurden, erheblich weiterentwickelt. Der beste Weg, um dieses Problem jetzt zu beheben, ist die Verwendung der in Chrome integrierten Emulatoren.

Um die Emulatoren zu verwenden, öffnen Sie DevTools (drücken Sie F12) und klicken Sie dann auf das folgende Symbol, um Folgendes umzuschaltenDevice Toolbar :

Die devtools-Schaltfläche

Auf diese Weise können Sie das gewünschte Mobilgerät oder Ansichtsfenster emulieren.

Mike Poole
quelle
2

In Chrome verursachen die Symbole Ihrer Addons in der oberen rechten Ecke das Problem

-> Ändern Sie die Größe der Adressleiste (wo Sie die URLs eingeben) auf die maximale Breite (ziehen Sie die Leiste am rechten Rand nach rechts).

oder deaktivieren Sie die Symbole

Tamer Güner
quelle
2

Ich bin faul, um es noch einfacher zu machen, lassen Sie das Lesezeichen den Benutzer nach Größen fragen :-D

javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()
Rob Boerman
quelle
1

Ich habe ähnliche Probleme gehabt und gerade eine gute Lösung gefunden. Öffnen Sie Ihre Chrome-Devtools und oben links befindet sich ein kleiner Bildschirm und ein iPad-Symbol. Klicken Sie darauf und es öffnet sich eine mobile Ansicht Ihrer Seite. Sie können es auf vordefinierte Geräte oder eine benutzerdefinierte Auflösung einstellen. Eigentlich ziemlich geschickt.

Dan Freeman
quelle
0

Eine andere einfache Lösung besteht darin, auf Strg + Umschalt + N zu klicken, um den Inkognito-Modus aufzurufen. Dort können Sie die Größe Ihres Browserfensters nach Belieben ändern.

Nummer 5
quelle
2
Auf Mac 10.9 Chrome 38.0.2125.104 ist dies nicht der Fall
Geotheory
1
Unter Linux Chromium 44.0.2403.89 ist dies ebenfalls nicht der Fall
Ikar Pohorský
Unter Windows 8 Chrome Version 74.0.3729.131 (Official Build) (64-Bit) ist dies nicht der Fall
The Red Pea
0

Ich mag dieses Tool, weil es Ihnen ermöglicht, schnell zu wechseln und bei mobilen Größen problemlos zwischen Hochformat und Horizontal zu wechseln. Außerdem können Sie ein personalisiertes Lesezeichen erstellen. Wenn Sie also häufig für dunkle Auflösungen entwerfen, können Sie diese speichern und verwenden.

Ich musste eines dieser Tools verwenden, da ich trotz der obigen Antwort mein Fenster nicht richtig auf 320 skalieren konnte. Dieses Tool scheint insgesamt eine schnellere Lösung zu sein.

http://lab.maltewassermann.com/viewport-resizer/

Christos Hrousis
quelle
0

Ich stoße immer auf dieses Problem mit angehefteten Registerkarten. Chrome ändert die Größe nicht unter eine horizontale Breite von acht sichtbaren angehefteten Registerkarten, falls vorhanden! Entfernen Sie einfach die Registerkarte, deren Größe Sie ändern möchten, um dieses Problem zu lösen ...

Markus
quelle
0

Dies ist mein erster Beitrag zur Stackoverflow-Community und meine Bemühungen, all Ihren wunderbaren Menschen, die das Internet zu einem so mächtigen Werkzeug gemacht haben, etwas zurückzugeben. Nun zu anser: Safari, hat diese coole Funktion. Sie müssen die Safari-Entwickleroption in den Einstellungen aktivieren. Screenshot zum Einrichten von Einstellungen in Safari, um das Entwicklermenü zu aktivieren

Nach der Aktivierung können Sie auf eine Reihe sehr leistungsfähiger Entwicklertools zugreifen. Eines dieser Tools ist die Ansichtsfensteranpassung, mit der Sie das reaktionsschnelle Layout Ihrer Website testen können. Um reaktionsschnelle Layout-Tests zu aktivieren, können Sie die Tastenkombination Cmd + Strg + R verwenden, um die Option zum Anpassen des Safari-Ansichtsports zu aktivieren. Auf diese Weise haben Sie genügend Kontrolle, um Ihre Website auf verschiedenen Ansichtsfenstergrößen zu testen.

Screenshot davon, wie Ihr Browserfenster aussehen wird, wenn die Option zum Testen des reaktionsschnellen Layouts aktiviert ist.

  1. Link zum Aktivieren des Entwicklermenüs in Safari: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/
Dr.Gaurav Gupta
quelle
-4

Viele Smartphones skalieren die Seite mithilfe des Zooms so, dass sie in ihre Bildschirmgröße passt. Ihre minimale Seitenbreite beträgt wahrscheinlich 400px. Ohne Beispielcode denke ich, dass das alles ist, was gesagt werden kann.

user372719
quelle