{"id":271,"date":"2024-01-07T05:02:36","date_gmt":"2024-01-07T05:02:36","guid":{"rendered":"http:\/\/www.phpgang.com\/?p=271---044c4e87-332b-411c-acb0-0e33a7acd09f"},"modified":"2024-01-07T05:02:36","modified_gmt":"2024-01-07T05:02:36","slug":"how-to-test-responsive-theme-in-chrome","status":"publish","type":"post","link":"https:\/\/www.phpgang.com\/how-to-test-responsive-theme-in-chrome_271.html","title":{"rendered":"How to test Responsive theme in Chrome"},"content":{"rendered":"<p>I have created a Responsive (Responsive Web Design(RWD) is a web approach aimed create\u00a0sites to provide an optimal viewing experience easy reading and navigation with a minimum of\u00a0re-sizing.) HTML theme and too worried how to test it on\u00a0different\u00a0devices and verify that how it looks, after full day searching got some hints to test it and the best way i have found is Google Chrome where we have a perfect Developer tool to test it and i did the same and it make my day. Now i am going to share that knowledge in this post and world has to know how to do it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-272\" alt=\"How-to-test-Responsive-theme-in-Chrome\" src=\"https:\/\/images.phpgang.com\/2013\/05\/How-to-test-Responsive-theme-in-Chrome.png\" width=\"760\" height=\"400\" \/><\/p>\n<p>Open your website in Google Chrome browser and click on menu button-&gt;Tools-&gt;Developer tools:<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 1px solid black;\" alt=\"Chrome Developers tool\" src=\"https:\/\/images.phpgang.com\/2013\/05\/Chrome-Developers-tool.png\" width=\"760\" height=\"400\" \/><\/p>\n<p>You can see menu opens in bottom of browser like this.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 1px solid black;\" alt=\"Chrome-Developers-tool-2\" src=\"https:\/\/images.phpgang.com\/2013\/05\/Chrome-Developers-tool-2.png\" width=\"760\" height=\"400\" \/><\/p>\n<p>Now click on settings button on bottom right corner\u00a0<img loading=\"lazy\" decoding=\"async\" style=\"border: 1px solid black;\" alt=\"settings-button\" src=\"https:\/\/images.phpgang.com\/2013\/05\/settings-button.png\" width=\"17\" height=\"17\" \/>\u00a0and get the settings.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 1px solid black;\" alt=\"Chrome-Developers-tool-3\" src=\"https:\/\/images.phpgang.com\/2013\/05\/Chrome-Developers-tool-3.png\" width=\"760\" height=\"400\" \/><\/p>\n<p>Now click on Overrides it will show you window sizing and devices list to change\u00a0resolution see bellow screen.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 1px solid black;\" alt=\"Chrome-Developers-tool-4\" src=\"https:\/\/images.phpgang.com\/2013\/05\/Chrome-Developers-tool-4.png\" width=\"760\" height=\"400\" \/><\/p>\n<p>Check on User Agent and select your device from list given and change resolution as you want to change. I have selected Android 4.0.2&#8230;. and here is my screen on browser.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 1px solid black;\" alt=\"Chrome-Developers-tool-5\" src=\"https:\/\/images.phpgang.com\/2013\/05\/Chrome-Developers-tool-5.png\" width=\"1365\" height=\"652\" \/><\/p>\n<div class=\"fb-page\" data-href=\"https:\/\/www.facebook.com\/9h9gang\" data-width=\"765\" data-height=\"358\" data-small-header=\"false\" data-adapt-container-width=\"true\" data-hide-cover=\"false\" data-show-facepile=\"true\" data-show-posts=\"false\"><div class=\"fb-xfbml-parse-ignore\"><blockquote cite=\"https:\/\/www.facebook.com\/facebook\"><a href=\"https:\/\/www.facebook.com\/facebook\" target=\"_blank\" rel=\"noopener\">Facebook<\/a><\/blockquote><\/div><\/div><br><strong>Tutorial Categories:<\/strong><div class='category'><div class=\"social-popout2\"><a href=\"https:\/\/www.phpgang.com\/category\/designing\" title=\"View all posts in Designing\">\n        <img decoding=\"async\" src=\"http:\/\/images.phpgang.com\/cat\/127.png\" alt=\"Designing\" \/><\/a><\/div><div class=\"social-popout2\"><a href=\"https:\/\/www.phpgang.com\/category\/html\" title=\"View all posts in HTML\">\n        <img decoding=\"async\" src=\"http:\/\/images.phpgang.com\/cat\/11.png\" alt=\"HTML\" \/><\/a><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>I have created a Responsive (Responsive Web Design(RWD) is a web approach aimed create\u00a0sites to provide an optimal viewing experience easy reading and navigation with a minimum of\u00a0re-sizing.) HTML theme and too worried how to test it on\u00a0different\u00a0devices and verify that how it looks, after full day searching got some hints to test it and the best way i have found is Google Chrome where we have a perfect Developer tool to test it and i did the same and it make my day. Now i am going to share that knowledge in this post and world has to know how to do it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-272\" alt=\"How-to-test-Responsive-theme-in-Chrome\" src=\"https:\/\/images.phpgang.com\/2013\/05\/How-to-test-Responsive-theme-in-Chrome.png\" width=\"550\" height=\"300\" srcset=\"https:\/\/www.phpgang.com\/wp-content\/uploads\/2013\/05\/How-to-test-Responsive-theme-in-Chrome.png 550w, https:\/\/www.phpgang.com\/wp-content\/uploads\/2013\/05\/How-to-test-Responsive-theme-in-Chrome-300x163.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/p>\n","protected":false},"author":1,"featured_media":272,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"twitterCardType":"","cardImageID":0,"cardImage":"","cardTitle":"","cardDesc":"","cardImageAlt":"","cardPlayer":"","cardPlayerWidth":0,"cardPlayerHeight":0,"cardPlayerStream":"","cardPlayerCodec":"","footnotes":""},"categories":[164,127,11],"tags":[135,134,128,131,133,132,129,130],"_links":{"self":[{"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/posts\/271"}],"collection":[{"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/comments?post=271"}],"version-history":[{"count":0,"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/posts\/271\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/media\/272"}],"wp:attachment":[{"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/media?parent=271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/categories?post=271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpgang.com\/wp-json\/wp\/v2\/tags?post=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}