Categories

Ausgewählte Vorlagen

Wie man Google Chrome Geräteemulationsfunktion nutzt

Daniel Morales Oktober 28, 2015
Rating: 3.6/5. From 14 votes.
Please wait...

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 nutzt

Um Gerätemodus zu aktivieren

  1. Öffnen Sie Ihre Website mit Hilfe vonGoogle Chrome Browser.

  2. Drücken Sie F12 um Chrome DevTools zu öffnen.

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

    How to use Google Chrome Device Emulation feature_1
  4. 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.

  1. Wählen Sie ein Modell von der voreingestellten Auswahl ein bestimmtes Gerät zu emulieren:

    How to use Google Chrome Device Emulation feature_2

    Jedes Preset konfiguriert automatisch Geräteemulation auf folgende Weise (stellt die Geräteauflösung und Pixelverhältnis ein, ermöglicht Touch-Emulation, etc).

  2. Wechseln Sie zwischen Portrait- und Landschaft ansicht indem Sie auf das Symbol der “Swap Dimensions” klicken. Wählen Sie den ‘Fit checkboxradio button ,um sicherzustellen, dass der emulierte Bildschirm voll und ganz in Ihrem Browser Ansichtsfenster sichtbar bleibt:

    How to use Google Chrome Device Emulation feature_3
  3. 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 :

    How to use Google Chrome Device Emulation feature_4

Um Medienanfragen zu finden

Gerätemodus macht Ihnen die Medienanfragen leicht zugänglich und einfach zu prüfen.

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

    How to use Google Chrome Device Emulation feature_5
  2. Medien-Anfragen werden farblich gekennzeichnet wie folgt:

    How to use Google Chrome Device Emulation feature_6

    Blau: Abfragen die eine maximale Breite haben;

    Grün: Abfragen die eine Breite eines Bereichs haben;

    Orange: Abfragen die eine minimale Breite haben.

  3. Um Bildschirmstile zu sehen, klicken Sie eine Medienabfragen Leiste um die Emulatorauflösung anzupassen und Stile vorzuschauen für die erwählten Bildschirmgrößen:

    How to use Google Chrome Device Emulation feature_7
  4. 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:

    How to use Google Chrome Device Emulation feature_8
  5. Um die Emulation auszuschalten ohne den Geräte-Modus zu verlassen, klicken Sie auf das ‘Reset all overrides’ Symbol und aktualisieren Sie die Seite:

    How to use Google Chrome Device Emulation feature_9
  6. 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:

    How to use Google Chrome Device Emulation feature_10

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
Dieser Eintrag wurde um Entwicklerwerkzeuge geschrieben und Chrome, device, emulation, feature, google markiert. Bookmarken Sie den permalink.

Submit a ticket

Sollte Ihre Frage durch die Tutorials nicht ausreichend beantwortet worden sein, benutzen Sie bitte den folgenden Link, um sich an unser Beratungsteam (Support) zu wenden. Wir bieten Ihnen unsere Hilfe und Unterstutzung an. 24 Stunden am Tag, 7 Tage die Woche!
Ticket Einrichten