注目の記事 PICK UP

How to emulate and display a mobile device from a PC in Chrome

Last Updated 2021.12.12

How to emulate and display a mobile device from a PC in Chrome

19-chromedev-header
I think the problem with website design is the display test on mobile devices when it is created with responsive design. Since the WordPress theme of this site is also responsive design, it is essential to test the display on mobile devices and tablet devices. At that time, “Developer Tools”, which is a standard function of Chrome, is convenient. This article describes how to emulate a mobile device display with developer tools.

How to use developer tools

19-chromedev-01
After opening Chrome on your PC, open the website you want to test display on your mobile device or the website page of your local environment.
Go to “Google Chrome Settings”-> “Other Tools”-> “Developer Tools” in the upper right corner of Chrome and click. Then the Overview screen will be displayed on the right side of Chrome.

Emulated display method for mobile devices

19-chromedev-02
Click the mobile terminal emulate icon surrounded by the red frame in the upper right of the above figure. Then, the website you are currently viewing will emulate what it looks like when displayed on a mobile device.
You can select the mobile device you want to emulate by clicking the pull-down list of devices to emulate in the upper left of the above figure. By setting the selection item of the mobile terminal to “Responsive”, you can also check the breakpoint when making a responsive design.

On this site, the breakpoint between the layout for PC and the layout for mobile is 770px. This layout for PC and layout for mobile can be set only with CSS, but it seems that javascript is often used together to set breakpoints dynamically. The theme of this site also acquired the window size with javascript and divided the processing according to whether it was 770px or more or less.

If you want to study, right-click from Chrome → click “View Page Source”, click the link to the “.css” “.js” file from the HTML source of the WEB page, and open it in Chrome to open CSS. You can see the contents and the contents of js. Please utilize the display of the page source as a reference for WEB production.

What is Reset CSS - The Basics of Web Production
Reset CSS is required when designing mainly for WordPress themes and web production. I will explain what this reset CSS is and explain it as a tips useful in the field of customizing wordpress themes and web production.

スポンサードリンク

Related post

  1. 18-resetcss-aicache

    What is Reset CSS – The Basics of Web Produc…

  2. 20-marketing-aicache

    Marketing Definition-From Consumer-Oriented to Val…

  3. 11-wordpressfirst-aicache

    What is AMP that improves mobile usability?

  4. 12-wordpressfirst-aicache

    How to intall and advanced AMP for WP

  5. 09-wordpressfirst-aicache

    Work with Google services with Site Kit by Google

  6. 05-05-sxomarketing-aicache

    SEO measures from -2022 to realize SXO search expe…

  7. 26-gdpr-aicache

    Protect the personal information of users in the E…

  8. 05-03-aboutsxo-aicache

    What is SXO Search Experience Optimization? -SEO&#…

  9. 02-02-csspseudoclass-aicache

    I have a feeling that the rental server will becom…

スポンサードリンク

Featured Posts

  1. 11-wordpressfirst-aicache What is AMP that improves mobile usabili…
  2. 05-wordpressfirst-aicache Settings to install WordPress and do it …
  3. 04-wordpressfirst-aicache Settings to install WordPress and do it …
  4. 12-wordpressfirst-aicache How to intall and advanced AMP for WP
  5. 05-05-sxomarketing-aicache SEO measures from -2022 to realize SXO s…
  6. 13-wordpressfirst-aicache How to set up amp for WP in detail ̵…
  7. 26-gdpr-aicache Protect the personal information of user…
  8. 20-marketing-aicache Marketing Definition-From Consumer-Orien…
  9. 05-03-aboutsxo-aicache What is SXO Search Experience Optimizati…
  10. 19-chromedev-aicache How to emulate and display a mobile devi…

PICK UP posts

  1. 30-wpsitemap-aicache Generate user-friendly sitemaps in WP Si…
  2. 16-onamae-aicache Set DNS settings for onamae.com domain-c…
  3. 03-wordpressfirst-aicache Settings to install WordPress and do it …
  4. 01-wordpressfirst-aicache Settings to install WordPress and do it …
  5. 20-marketing-aicache Marketing Definition-From Consumer-Orien…
  6. 13-wordpressfirst-aicache How to set up amp for WP in detail ̵…
  7. 05-wordpressfirst-aicache Settings to install WordPress and do it …
  8. 08-wordpress-header Easy Way to Set Up WordPress – COR…
  9. 09-wordpressfirst-aicache Work with Google services with Site Kit …
  10. 12-wordpressfirst-aicache How to intall and advanced AMP for WP

Popular posts

  1. 25-marketing-aicache
  2. 16-onamae-aicache
  3. 18-resetcss-aicache
  4. 05-05-sxomarketing-aicache
  5. 29-complianzgdpr-aicache
  6. 35-newthemeupdate-aicache
  7. 14-wordpress-aicache
  8. 19-chromedev-aicache
  9. 02-wordpressfirst-header
  10. 26-gdpr-aicache

Latest posts

  1. 17-postandpage-aicache
  2. 02-02-csspseudoclass-aicache
  3. 25-marketing-aicache
  4. 35-newthemeupdate-aicache
  5. 05-03-aboutsxo-aicache
  6. 05-05-sxomarketing-aicache
  7. 20-marketing-aicache
  8. 29-complianzgdpr-aicache
  9. 26-gdpr-aicache
  10. 19-chromedev-aicache

Recommend posts

  1. 04-wordpressfirst-aicache
  2. 26-gdpr-aicache
  3. 09-wordpressfirst-aicache
  4. 02-wordpressfirst-header
  5. 10-wordpressfirst-aicache
  6. 08-wordpress-header
  7. 12-wordpressfirst-aicache
  8. 29-complianzgdpr-aicache
  9. 20-marketing-aicache
  10. 02-02-csspseudoclass-aicache
PAGE TOP