注目の記事 PICK UP

如何在 Chrome 中从 PC 模拟和显示移动设备

Last Updated 2021.12.08

如何在 Chrome 中从 PC 模拟和显示移动设备

19-chromedev-header
我认为网站设计的问题在于使用响应式设计创建时在移动设备上的显示测试。由于本站的WordPress主题也是响应式设计,因此有必要在移动设备和平板设备上测试显示效果。当时,Chrome 的标准功能“开发者工具”很方便。本文介绍如何使用开发人员工具模拟移动设备显示。

如何使用开发者工具

19-chromedev-01
在PC上打开Chrome后,打开您要测试的网站在您的移动设备或您本地环境的网站页面上显示。
进入Chrome右上角的“谷歌浏览器设置”->“其他工具”->“开发者工具”,点击。然后概览屏幕将显示在 Chrome 的右侧。

移动设备的模拟显示方法

19-chromedev-02
点击上图右上方红框包围的移动端模拟图标。然后,您当前查看的网站将模拟在移动设备上显示时的外观。
您可以通过单击上图左上角的要模拟的设备下拉列表来选择要模拟的移动设备。通过将移动端的选择项设置为“响应式”,也可以在做响应式设计时检查断点。

在这个网站上,PC布局和移动布局之间的断点是770px。这种PC版和手机版的布局只能用CSS设置,不过貌似javascript经常一起用,动态设置断点。本站的主题也用javascript获取了窗口大小,并根据770px或更大或更小来划分处理。

如果你想学习,从Chrome右键→点击“查看页面源代码”,从WEB页面的HTML源中点击“.css”“.js”文件的链接,在Chrome中打开即可打开CSS . 可以看到内容和js的内容。请利用页面源码的展示作为WEB制作的参考。

在 WordPress 主题和 WEB 制作中主要工作设计时,需要重置 CSS。 解释什么是重置CSS,并解释为提示,这是有用的自定义WordPress主题和WEB生产现场。

Related post

  1. 12-wordpressfirst-aicache

    如何安装和高级 AMP for WP

  2. 18-resetcss-aicache

    什么是重置 CSS – WEB 制作基础知识

  3. 02-02-csspseudoclass-aicache

    我有一种感觉,租赁服务器将变得更加复杂,并且不再需要 AMP。

  4. 30-wpsitemap-aicache

    在 WP 站点地图页面生成用户友好的站点地图

  5. 09-wordpressfirst-aicache

    Site Kit by Google 与 Google 服务合作

  6. 26-gdpr-aicache

    保护欧盟用户的个人信息和响应GDPR的个人信息保护法

  7. 05-03-aboutsxo-aicache

    什么是 SXO 搜索体验优化? -SEO的下一代SEO措施

  8. 11-wordpressfirst-aicache

    什么是 AMP 以提高移动可用性?

  9. 05-05-sxomarketing-aicache

    SEO措施-2022年实现SXO搜索体验优化

特色文章

  1. 11-wordpressfirst-aicache 什么是 AMP 以提高移动可用性?
  2. 26-gdpr-aicache 保护欧盟用户的个人信息和响应GDPR的个人信息保护法
  3. 05-wordpressfirst-aicache 安装 WordPress 并首先执行设置 – 永久链接设置
  4. 20-marketing-aicache 营销定义—从消费者导向到价值驱动营销
  5. 03-wordpressfirst-aicache 安装 WordPress 后要做的第一个设置 – 显示设置
  6. 02-wordpressfirst-aicache 安装 WordPress 并首先设置 – 发布设置
  7. 04-wordpressfirst-aicache 安装 WordPress 并首先执行的设置 – 讨论设置
  8. 17-postandpage-aicache WordPress 帖子页面和固定页面之间的区别是什么?
  9. 29-complianzgdpr-aicache 英国 GDPR 更加严格—Complianz GDPR & CCPA …
  10. 12-wordpressfirst-aicache 如何安装和高级 AMP for WP

挑选文章

  1. 07-wordpressfirst-aicache 新的块编辑器很难使用。 此时为Classic Editor
  2. 12-wordpressfirst-aicache 如何安装和高级 AMP for WP
  3. 02-wordpressfirst-aicache 安装 WordPress 并首先设置 – 发布设置
  4. 14-wordpress-aicache 轻松备份和恢复 WordPress 网站 – UpdraftPlus…
  5. 29-complianzgdpr-aicache 英国 GDPR 更加严格—Complianz GDPR & CCPA …
  6. 19-chromedev-aicache 如何在 Chrome 中从 PC 模拟和显示移动设备
  7. 16-onamae-aicache 为您的onamae.com域核心服务器集成设置DNS设置
  8. 04-wordpressfirst-aicache 安装 WordPress 并首先执行的设置 – 讨论设置
  9. 10-wordpressfirst-aicache Jetpack插件-Facebook·Twitter协作WEB高速化多功能插件
  10. 17-postandpage-aicache 看来租用服务器会增加

Twitter

最近的文章

  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

推荐文章

  1. 12-wordpressfirst-aicache
  2. 13-wordpressfirst-aicache
  3. 11-wordpressfirst-aicache
  4. 03-wordpressfirst-aicache
  5. 29-complianzgdpr-aicache
  6. 20-marketing-aicache
  7. 01-wordpressfirst-aicache
  8. 08-wordpress-header
  9. 14-wordpress-aicache
  10. 05-wordpressfirst-aicache
PAGE TOP