Browser skaliert nicht unter 400px?

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?

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.

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.

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.

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

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.

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.

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:".

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:

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:

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');})();

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 :

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

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

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);})()

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

Installieren Sie einfach das Responsive Web Design-Add-on in Chrome. Daraufhin wird ein separates Fenster ohne Adressleiste und Registerkarten geöffnet, das auf maximal 10 Pixel verkleinert werden kann.

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

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.

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.

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/

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 ...

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/

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.