Wie entferne ich schwarze Balken in Chrome-Dev-Tools? Ist es ein Chrome-Bug?

Um ehrlich zu sein, kann ich keine offizielle Erklärung finden, die das erklärt, aber wenn man sich die Geräte-Emulator-Optionen anschaut, sind es "Platzhalter" für die typischen Navigationsleisten- und Tastaturbereiche auf verschiedenen Geräten.

Wenn Sie die Option neben der Dropdown-Liste "Gerät" aktivieren, sehen Sie einige Optionen, die sich auf diese (fast) schwarzen Bereiche auswirken:

Mit diesem gesagt, ich glaube nicht, dass es wirklich eine Möglichkeit gibt, diese zu deaktivieren .. Sie könnten auf den Link "Alle Overrides zurücksetzen" links von "Gerät" klicken und manuell eine Bildschirmgröße einstellen, aber dann würden Sie verlieren die gerätespezifische Emulation und es würde als Standard-Desktop-Browser mit einer bestimmten Fenstergröße berichten, ähnlich wie einfach die Größe Ihres Browsers ändern.

Ich fand das auch nervig, da ich Vollbild-Cordova-Apps entwickle, die nicht über die Safari-Navigationsleiste verfügen.

Eine temporäre Problemumgehung, die ich benutze, besteht darin, die Option "Handy emulieren" zu deaktivieren und die Seite zu aktualisieren.

Ich habe das auch schon vor einiger Zeit gesehen, da ich den iPhone 6-Emulator von Chrome Dev Tools für die schnelle Entwicklung von Cordova-Apps verwendet habe. Sie können zwar die Standardvorgabe für das iPhone 6 nicht ohne diese schwarzen Balken verwenden, Sie können jedoch eine neue Voreinstellung erstellen, die diese für Sie streicht.

Wenn der Dev Tools-Inspektor geöffnet ist, klicken Sie oben rechts auf das Menü mit den 3-Punkt-gestapelten Hamburgern und wählen Sie Einstellungen (oder drücken Sie einfach F1). Wählen Sie dann in dem sich öffnenden Modal von links Geräte , um die Voreinstellungen für mobile Geräte anzuzeigen. Klicken Sie auf Eigenes Gerät hinzufügen ... und geben Sie Folgendes ein:

Emulierte Geräte iPhone 6 Benutzerdefinierte Einstellungen

Oder eine Textversion:

• Name: iPhone 6 (Keine schwarzen Balken) - oder was immer Sie möchten
• Breite: 375
• Höhe: 667
• Gerätepixelverhältnis: 2

Der User-Agent-String, den ich hier benutze, ist wie folgt, aber offensichtlich kann er sich mit allem anpassen, was Sie für Ihren Anwendungsfall brauchen.

Schließen Sie das neue benutzerdefinierte Gerät, nachdem Sie das neue benutzerdefinierte Gerät gespeichert haben. Wählen Sie dann im Pulldown-Menü "Mobiles Gerät" Ihr neues benutzerdefiniertes Gerät aus und aktualisieren Sie die Seite. Sie sollten jetzt einen Vollbild-iPhone 6-Emulator haben.

Google Chrome-Entwicklertools - Deaktivieren Sie die Optionen für die schwarze Emulation-Option

Ich denke, die Frage ist hier bereits beantwortet. Damit können Sie den Gerätemodus

Das seltsame ist, ich sehe das nur beim Emulieren von iPhone 6, es passiert nicht mit anderen Emulatoren (iPhone 5, 6 Plus, etc ...).

Es gibt 8 Darstellungsoptionen für das iPhone 6 (siehe Abbildung unten), aber für den Rest gibt es nur zwei Optionen (Hochformat, Querformat).

Ich denke, das ist ein guter Schritt, um den Emulator mehr wie auf einem echten Gerät zu machen. Vielleicht als erster Schritt, nur um iPhone 6 Emulator gemacht.