- Web Templates
- E-commerce Templates
- CMS und Blog Templates
- Facebook Templates
- Website-Builder
Wie man Google Chrome Geräteemulationsfunktion nutzt
Oktober 28, 2015
Dieses Tutorial zeigt Ihnen, wie Sie Google Chrome Geräteemulationsfunktion benutzen. Dieses Funktion wird Ihnen helfen, Ihre ansprechende Designs durch die Emulation von unterschiedlichen Bildschirmgrößen und Auflösungen zu testen.
Wie man Google Chrome Geräteemulationsfunktion nutztUm Gerätemodus zu aktivieren
Öffnen Sie Ihre Website mit Hilfe vonGoogle Chrome Browser.
Drücken Sie F12 um Chrome DevTools zu öffnen.
Schalten Sie Gerät-Modus durch Drücken des Toggle device mode Symbols. Wenn Gerätemodus aktiviert ist, wird das Symbol blau und das Ansichtsfenster verwandelt sich in einen Geräte-Emulator:
Sie können auch den Gerätemodus on/off mit der folgenden Tastenkombination wechseln :
Ctrl+Shift+M (oder Cmd+Shift+M für Mac).
Um Bildschirm Emulator zu verwenden
Der Bildschirm-Emulator hilft Ihnen, zu testen ob Ihre Webseite responsive ist , es hat eine Vielzahl von Emulations Voreinstellungen.
Wählen Sie ein Modell von der voreingestellten Auswahl ein bestimmtes Gerät zu emulieren:
Jedes Preset konfiguriert automatisch Geräteemulation auf folgende Weise (stellt die Geräteauflösung und Pixelverhältnis ein, ermöglicht Touch-Emulation, etc).
Wechseln Sie zwischen Portrait- und Landschaft ansicht indem Sie auf das Symbol der “Swap Dimensions” klicken. Wählen Sie den ‘Fit checkbox’ radio button ,um sicherzustellen, dass der emulierte Bildschirm voll und ganz in Ihrem Browser Ansichtsfenster sichtbar bleibt:
Um eine benutzerdefinierte Bildschirmgröße zu emulieren, stellen Sie die CSS-Pixelabmessungen des Geräts in die manuell in die Breite und Höhe Felder ein :
Um Medienanfragen zu finden
Gerätemodus macht Ihnen die Medienanfragen leicht zugänglich und einfach zu prüfen.
Um den Medienabfrage Inspektor anzuzeigen, klicken Sie das ‘Media queries’ Symbol in der linken oberen Ecke des Viewports. Das DevTools erkennt, Medienanfragen in Ihrem Stylesheets und zeigt sie als farbige Balken im oberen Lineal:
Medien-Anfragen werden farblich gekennzeichnet wie folgt:
Blau: Abfragen die eine maximale Breite haben;
Grün: Abfragen die eine Breite eines Bereichs haben;
Orange: Abfragen die eine minimale Breite haben.
Um Bildschirmstile zu sehen, klicken Sie eine Medienabfragen Leiste um die Emulatorauflösung anzupassen und Stile vorzuschauen für die erwählten Bildschirmgrößen:
Klicken Sie mit der rechten Taste auf eine Bar zur Ansicht, wo die Medien-Abfrage definiert ist in CSS und wechseln Sie zur Definition im Quellencode:
Um die Emulation auszuschalten ohne den Geräte-Modus zu verlassen, klicken Sie auf das ‘Reset all overrides’ Symbol und aktualisieren Sie die Seite:
Sie können sogar die Operations Systemversion des Mobil-Geräts ändern.
Öffnen Sie das DevTools Emulation Tab , indem Sie auf das ‘More overrides’ Symbol in der oberen rechten Ecke der Browser-Viewport klicken. Wählen Sie dann ‘Network’ im Emulationtab:
Wir hoffen, dass dieser Artikel nützlich für Sie war . Sie können sich gerne das detalierte Videotutorial ansehen.
Wie man Google Chrome Geräteemulationsfunktion nutzt