{"id":18846,"date":"2020-01-03T23:11:46","date_gmt":"2020-01-03T15:11:46","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18846"},"modified":"2020-01-01T19:27:12","modified_gmt":"2020-01-01T11:27:12","slug":"chrome-viewport","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/","title":{"rendered":"Viewport Emulation with Chrome’s Device Metrics"},"content":{"rendered":"

When we are building or prototyping a responsive website, we need to give the website a test in numerous viewport sizes to check to see if the layout and pages are displayed well<\/strong>. There are several ways in doing so: you can use Adobe Edge Inspect<\/strong> or a browser extension such as Dimensions for Chrome<\/a>.<\/p>\n

The problem is that these tools do not always work seamlessly in every case. Adobe Edge Inspect requires your laptop and mobile devices to be connected under the same wireless connection, XIP.io also requires your devices to connect to the Internet, and in my experience it is quite painful to debug responsive website under iframe<\/code> or having to repeatedly resize the browser window.<\/p>\n

Emulate Viewport Size<\/h2>\n

Chrome now comes with a built-in feature that allows you to emulate your site in many size of device screen and resolution. To enable it, open the Developer Tools Setting<\/strong> by navigating from the View > Developer > Developer Tools<\/strong> menu.<\/p>\n

\"Chrome<\/figure>\n

Head over to the Devices<\/strong> panel. Select Add custom device<\/strong> to add a custom viewport size, pixel ratio, and the user agent.<\/p>\n

\"Inputs<\/figure>\n

Now, the custom device we added will appear in the device selection as follows. Select it and you should see viewport changed instantly.<\/p>\n

\"select<\/figure>\n

For the rest, you can find a complete list of mobile device viewport sizes in Screensiz.es<\/a>.<\/p>\n

Conclusion<\/h2>\n

Google Chrome has a lot of helpful features that can streamline the development process. Now, by using Chromes Device<\/strong> setting, you can debug your website for specific viewport size without having to deal with restricted connectivity, using third-party browser extensions, or trawling through an iframe<\/code>.<\/p>","protected":false},"excerpt":{"rendered":"

When we are building or prototyping a responsive website, we need to give the website a test in numerous viewport sizes to check to see if the layout and pages are displayed well. There are several ways in doing so: you can use Adobe Edge Inspect or a browser extension such as Dimensions for Chrome.…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[1258,2856],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nViewport Emulation with Chrome's Device Metrics - Hongkiat<\/title>\n<meta name=\"description\" content=\"When we are building or prototyping a responsive website, we need to give the website a test in numerous viewport sizes to check to see if the layout and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Viewport Emulation with Chrome's Device Metrics\" \/>\n<meta property=\"og:description\" content=\"When we are building or prototyping a responsive website, we need to give the website a test in numerous viewport sizes to check to see if the layout and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-03T15:11:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/chrome-viewport\/chrome-devtool-set.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-viewport\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-viewport\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Viewport Emulation with Chrome’s Device Metrics\",\"datePublished\":\"2020-01-03T15:11:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-viewport\\\/\"},\"wordCount\":276,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-viewport\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/chrome-viewport\\\/chrome-devtool-set.jpg\",\"keywords\":[\"Chrome\",\"Dev Tools\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-viewport\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-viewport\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-viewport\\\/\",\"name\":\"Viewport Emulation with Chrome's Device Metrics - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-viewport\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-viewport\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/chrome-viewport\\\/chrome-devtool-set.jpg\",\"datePublished\":\"2020-01-03T15:11:46+00:00\",\"description\":\"When we are building or prototyping a responsive website, we need to give the website a test in numerous viewport sizes to check to see if the layout and\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-viewport\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-viewport\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-viewport\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/chrome-viewport\\\/chrome-devtool-set.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/chrome-viewport\\\/chrome-devtool-set.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-viewport\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Viewport Emulation with Chrome’s Device Metrics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Viewport Emulation with Chrome's Device Metrics - Hongkiat","description":"When we are building or prototyping a responsive website, we need to give the website a test in numerous viewport sizes to check to see if the layout and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/","og_locale":"en_US","og_type":"article","og_title":"Viewport Emulation with Chrome's Device Metrics","og_description":"When we are building or prototyping a responsive website, we need to give the website a test in numerous viewport sizes to check to see if the layout and","og_url":"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-01-03T15:11:46+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/chrome-viewport\/chrome-devtool-set.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Viewport Emulation with Chrome’s Device Metrics","datePublished":"2020-01-03T15:11:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/"},"wordCount":276,"commentCount":10,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/chrome-viewport\/chrome-devtool-set.jpg","keywords":["Chrome","Dev Tools"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/","url":"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/","name":"Viewport Emulation with Chrome's Device Metrics - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/chrome-viewport\/chrome-devtool-set.jpg","datePublished":"2020-01-03T15:11:46+00:00","description":"When we are building or prototyping a responsive website, we need to give the website a test in numerous viewport sizes to check to see if the layout and","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/chrome-viewport\/chrome-devtool-set.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/chrome-viewport\/chrome-devtool-set.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/chrome-viewport\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Viewport Emulation with Chrome’s Device Metrics"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4TY","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18846"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18846\/revisions"}],"predecessor-version":[{"id":49152,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18846\/revisions\/49152"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18846"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}