web-dev-qa-db-ger.com

Browser skaliert nicht unter 400px?

Ich arbeite daran, ein flüssiges Stylesheet zusammenzustellen, und es funktioniert wunderbar. Mir ist aufgefallen, dass mein Browserfenster in Chrome nicht unter 400px verkleinert wird. Es bleibt einfach dort hängen und in FF, wenn ich es verkleinere, bleibt es bei 400px stehen und öffnet eine horizontale Bildlaufleiste.

Wenn ich die Site auf meinem Handy öffne, sieht sie bei 320px perfekt aus, daher weiß ich, dass sie unter 400px skaliert wird. 

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

Wieder auf dem Desktop skaliert es auf eine minimale Breite von etwa 400px herunter und stoppt, aber wenn ich es auf meinem Handy öffne, skaliert es auf die Größe des Bildschirms des Telefons, die ungefähr 320px beträgt Skalieren Sie nicht auf die 320px auf dem Desktop.

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

126
Brodie

Chrome kann horizontal unter 400px (OS X) oder 218px (Windows) nicht skaliert werden, aber ich habe eine wirklich einfache Lösung für das Problem:

  1. Docken Sie den Web-Inspector nach rechts anstatt nach unten
  2. Verändern Sie die Größe des Inspektorfensters - Sie können den Browserbereich jetzt sehr klein machen (bis auf 0 Pixel).

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

vertical panel layout setting

Die HTML- und CSS-Panels passen wirklich gut und Sie öffnen sogar ein kleines Konsolenpanel. Dies hat mir erlaubt, komplett von Firefox/Firebug zu Chrome zu wechseln.

Inspector docked to right with vertical panel layout

Wenn Sie noch einen Schritt weiter gehen möchten, sehen Sie sich die Einstellungen für web inspector (Zahnradsymbol unten rechts) an und gehen Sie auf die Registerkarte user agent. Sie können die Bildschirmauflösung hier beliebig einstellen und sogar schnell zwischen Hoch- und Querformat wechseln.

Device resolution settings

UPDATE: Hier ist ein weiteres wirklich cooles Tool, das mir begegnet ist. http://lab.maltewassermann.com/viewport-resizer/

222
Oisin Lavery

dies kann an den Addons liegen, die Sie in Ihrem Browser installiert haben. Entfernen oder ausblenden Sie alle Addon-Symbole aus der Symbolleiste, und versuchen Sie es erneut. Wenn es Addons gibt, ändert der Browser nur die Adressleiste und hält die Addons sichtbar.

Update: 14.07.2013


Mit der neuesten Chrome-Version können Sie die Adressleiste jetzt neu skalieren und die Addons werden automatisch ausgeblendet. 

36

Ich war auch verblüfft, bekam 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 auf 111x80 reduzieren.

16
nayan9

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 URL:

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

Und geben Sie einen Namen wie "Kleines Fenster öffnen" oder ähnliches. So können Sie Fenster ohne Größenbeschränkungen in Chrom problemlos öffnen. Beachten Sie, dass das Kopieren in Ihre Adressleiste nicht funktioniert. Chrome streicht das "Javascript:" aus.

14
drinkdecaf

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

Chrome verfügt jetzt über einen Emulationsbereich im Inspektor, der durch Klicken auf das kleine Telefonsymbol in der oberen Menüleiste (zwischen der Lupe und Elements) aktiviert wird:

Chrome Emulation icon

Im Emulationsmodus können Sie die Größe des Ansichtsfensters auf alle gängigen Bildschirmgrößen für Mobilgeräte einstellen, unter anderem die Funktionen von Nice, wie das Berühren von Fingern, die Standortbestimmung und sogar die Eingabe von Beschleunigungssensoren:

enter image description here

10
gl03

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 aktuell im 320-Fenster angezeigte Seite anzuzeigen. Wenn Sie eine Bildlaufleiste erwarten, können Sie der Breite noch etwas hinzufügen.

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

Ich bin faul, um es noch einfacher zu machen, lassen Sie das Bookmarklet 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);})()
2
Rob Boerman

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

-> Verändere die Adressleiste (wo du die URLs eingibst) auf maximale Breite (zieh die Leiste am rechten Rand nach rechts)

oder deaktivieren Sie die Symbole

2
Tamer Güner

Ich habe dafür eine schnelle Lösung gefunden. 

Installieren Sie einfach das Responsive Web Design-Add-On für Chrome und es wird ein separates Fenster ohne Adressleiste und Registerkarten geöffnet, das auf 10 Pixel oder weniger verkleinert werden kann. 

Link hier: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related

1
Aniket Sengar

Eine andere einfache Lösung ist, auf Strg + Shift + N zu klicken, um den Inkognito-Modus aufzurufen. Dort können Sie die Größe Ihres Browser-Fensters beliebig ändern.

1
number5

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

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

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

0
christoshrousis

Ich bin immer auf dieses Problem mit gesteckten Registerkarten gestoßen. Die Größe von Chrome wird unterhalb einer horizontalen Breite von acht sichtbaren, fixierten Registern nicht geändert, falls vorhanden! Trennen Sie einfach die Registerkarte, deren Größe Sie ändern möchten, um dieses Problem zu lösen ...

0
Markus

Die DevTools in Chrome haben sich wesentlich von den meisten dieser Antworten entfernt. Der beste Weg, dieses Problem jetzt anzugehen, 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 den Device Toolbar zu wechseln:

 The devtools button

Auf diese Weise können Sie das gewünschte Mobilgerät oder die Größe des Ansichtsfensters emulieren.

0
Mike Poole