{"id":56559,"date":"2015-10-28T05:37:01","date_gmt":"2015-10-28T09:37:01","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=56559"},"modified":"2015-12-16T05:35:41","modified_gmt":"2015-12-16T10:35:41","slug":"how-to-use-google-chrome-device-emulation-feature","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/how-to-use-google-chrome-device-emulation-feature.html","title":{"rendered":"How to use Google Chrome Device Emulation feature"},"content":{"rendered":"

This tutorial will show you how to use Google Chrome Device Emulation<\/strong> feature. This feature will help you to test your responsive designs by emulating different screen sizes and resolutions.<\/p>\r\nHow to use Google Chrome Device Emulation feature<\/a>\r\n

To enable Device Mode<\/h3>\r\n
    \r\n

  1. Open your website, using Google Chrome<\/strong> browser.<\/p><\/li>\r\n

  2. Press F12<\/strong> to open Chrome DevTools<\/strong>.<\/p><\/li>\r\n

  3. Turn on device mode by pressing the Toggle device mode<\/strong> icon. When device mode is enabled, the icon turns blue<\/strong> and the viewport transforms into a device emulator:<\/p>\r\n\r\n\"How<\/a>\r\n<\/li>\r\n

  4. You can also toggle device mode on\/off<\/strong> using the keyboard shortcut: <\/p>\r\n

    Ctrl+Shift+M<\/strong> (or Cmd+Shift+M<\/strong> on Mac). <\/p>\r\n<\/li>\r\n<\/ol>\r\n\r\n\r\n

    To use Screen Emulator<\/h3>\r\n

    The screen emulator helps you test the responsiveness<\/strong> of your website, it has a variety of emulation presets. <\/p>\r\n

      \r\n

    1. Select a model<\/strong> from the preset dropdown to emulate a particular device:<\/p>\r\n\r\n\"How<\/a>\r\n

      Each preset automatically configures device emulation in the following ways (sets the device resolution<\/strong> and pixel ratio<\/strong>, enables touch emulation<\/strong>, etc).<\/p><\/li>\r\n

    2. Alternate between portrait<\/strong> and landscape<\/strong> views by clicking the ‘Swap Dimensions’ icon. Select the ‘Fit checkbox’ radio button to ensure that the emulated screen remains fully visible inside your browser viewport:<\/p>\r\n\r\n\"How<\/a>\r\n<\/li>\r\n

    3. To emulate a custom screen size<\/strong>, manually set the CSS pixel dimensions of the device in the width<\/strong> and height<\/strong> fields: <\/p>\r\n\r\n\"How<\/a>\r\n<\/li>\r\n<\/ol>\r\n\r\n\r\n

      To Inspect Media queries<\/h3>\r\n

      Device mode makes media queries readily accessible and easy for you to inspect. <\/p>\r\n

        \r\n

      1. To view the media query inspector, click the ‘Media queries’<\/strong> icon in the upper left corner of the viewport. The DevTools<\/strong> detect media queries in your stylesheets and display them as colored bars in the top ruler: <\/p>\r\n\r\n\"How<\/a>\r\n<\/li>\r\n

      2. Media queries are color-coded as follows: <\/p>\r\n\r\n\"How<\/a>\r\n

        Blue: Queries targeting a maximum width;<\/p>\r\n

        Green: Queries targeting widths within a range;<\/p>\r\n

        Orange: Queries targeting a minimum width.<\/p>\r\n<\/li>\r\n

      3. To preview screen styles<\/strong>, click a media query bar<\/strong> to adjust the emulator resolution and preview styles<\/strong> for the targeted screen sizes: <\/p>\r\n\r\n\"How<\/a>\r\n<\/li>\r\n

      4. Right-click a bar to view where the media query is defined<\/strong> in CSS and jump to the definition<\/strong> in source code:<\/p>\r\n\r\n\"How<\/a>\r\n<\/li>\r\n

      5. To turn off <\/strong>mobile emulation without exiting device mode, click the ‘Reset all overrides’<\/strong> icon and refresh the page:<\/p>\r\n\r\n\"How<\/a>\r\n<\/li>\r\n

      6. You can even change the Operation System<\/strong> version of mobile device.<\/p>\r\n

        Open the DevTools emulation drawer by clicking the ‘More overrides’<\/strong> icon in the top right corner of the browser viewport. Then, select ‘Network’<\/strong> in the emulation drawer: <\/p>\r\n\r\n\"How<\/a>\r\n<\/li>\r\n<\/ol>\r\n

        We hope this article was useful for you. Feel free to check our detailed video tutorial below.<\/p>\r\n\r\nHow to use Google Chrome Device Emulation feature<\/a>","protected":false},"excerpt":{"rendered":"

        This tutorial will show you how to use Google Chrome Device Emulation<\/strong> feature. This feature will help you to test your responsive designs by emulating different screen sizes and resolutions.<\/p>\n","protected":false},"author":37,"featured_media":56574,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[938],"tags":[2103,2105,2104,1548,929],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/56559"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=56559"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/56559\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/56574"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=56559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=56559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=56559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}