博客
关于移动视图测试、响应式设计和 Chrome 使用技巧的文章。
前端开发必备的 Chrome 插件：补齐 DevTools 短板
真正值得安装的 Chrome 开发者插件：框架调试工具、无障碍检测、页面检查、手机视图预览，以及判断插件是否安全的方法。
阅读文章 →Bootstrap 5 断点与响应式栅格详解
Bootstrap 5 的断点、容器宽度、响应式栅格类、Sass 混入和显示工具类，以及如何自定义和测试。
阅读文章 →如何在 Chrome 中修改 User Agent（无需插件）
不装插件也能修改 Chrome 的 User Agent：DevTools 的 Network conditions、设备模式、Client Hints、启动参数和 Playwright。
阅读文章 →Chrome 开发者工具使用教程：最常用的面板详解
Chrome 开发者工具（DevTools）实用教程：如何打开 DevTools、每个主要面板的作用，以及最省时间的快捷键。
阅读文章 →Chrome 手机模拟器：DevTools 设备模式使用教程
Chrome 内置手机模拟器的分步教程：打开设备模式、选择或添加机型、限制网络和 CPU、模拟触摸以及截图。
阅读文章 →跨浏览器测试：实用检查清单与免费工具
如何用很少的预算做浏览器兼容性测试：该覆盖哪些浏览器、检查什么，以及 Playwright 等免费工具。
阅读文章 →CSS 媒体查询详解：附移动端示例
CSS 媒体查询详解：语法、min-width 与 max-width、范围语法、适用于移动端、深色模式和触屏的媒体特性，以及常见错误。
阅读文章 →Google 移动设备友好性测试已下线：现在用什么替代
Google 已于 2023 年 12 月下线移动设备友好性测试。本文介绍可以替代它的免费工具，以及一套 10 分钟的页面检查流程。
阅读文章 →网站移动端适配指南：真正有效的 10 项修改
让网站适配手机的十项修改：从 viewport 标签、流式布局，到点击区域、表单和图片尺寸，附可直接复制的代码。
阅读文章 →如何测试响应式设计：能找出真实问题的方法
检查网站响应式效果的分步方法：宽度扫描、设备配置检查、内容压力测试、缩放测试和自动截图。
阅读文章 →iPhone 屏幕尺寸、分辨率与视口尺寸一览表（全机型）
从 iPhone SE 到 iPhone 18 Pro Max 的全部机型：屏幕尺寸（英寸）、分辨率（像素）、CSS 视口尺寸和像素比，并附网页设计说明。
阅读文章 →Chrome 中的 Lighthouse：用 DevTools 或插件做移动端审计
在 Chrome DevTools、Lighthouse 插件或命令行中运行 Lighthouse 移动端审计：设置方法、如何解读分数、为什么结果会波动，以及应该先修什么。
阅读文章 →WordPress 网站移动端适配：让手机显示正常的方法
针对在手机上显示异常的 WordPress 网站的分步修复：主题选择、区块和页面构建器设置、菜单、图片、插件以及测试。
阅读文章 →移动优先设计是什么？在设计和 CSS 中如何落地
移动优先对内容、布局和 CSS 意味着什么，与桌面优先有何不同，附 CSS 示例和常见错误。
阅读文章 →移动端网站测速：如何测量并提升手机页面速度
如何做有意义的移动端网站速度测试：真实用户数据与实验室数据的区别、Core Web Vitals 阈值、免费工具和真正有效的优化方法。
阅读文章 →如何在电脑上截取网页的手机版截图（含整页长截图）
在电脑版 Chrome 中截取任意网页的手机尺寸截图：可见区域或网页长截图，带或不带设备外框。
阅读文章 →Chrome 模拟手机：扩展程序还是 DevTools，该用哪个
Chrome 手机模拟器扩展与 DevTools 设备模式有何不同，各自能模拟什么，以及如何为移动端检查选择合适的工具。
阅读文章 →移动端网页测试清单：上线前的 30 项检查
一份实用的网站移动端测试清单：布局、导航、表单、媒体、速度、SEO 和无障碍，每项检查都注明了适用工具。
阅读文章 →响应式断点：常用数值与如何选择
手机、平板和桌面端常用的 CSS 断点，Tailwind、Bootstrap 和 Material 的对比，以及如何根据内容选择断点。
阅读文章 →Tailwind 响应式设计：断点与媒体查询详解
Tailwind CSS v4 中响应式设计的工作方式：默认断点、移动优先前缀、max 与区间变体、自定义断点和测试方法。
阅读文章 →如何在手机上访问 localhost 本地网站（真机与手机视图）
在真机或手机视图中打开本地开发网站：局域网 IP 与 --host、Chrome 端口转发、内网穿透隧道、模拟器中的地址，以及常见问题的解决方法。
阅读文章 →安卓模拟器测试网页：如何在电脑上测试网站的安卓端
在电脑上测试网站在安卓 Chrome 中的表现：Chrome 手机视图、Android Studio 模拟器，以及对真机进行远程调试。
阅读文章 →没有 iPhone 如何测试网站：iPhone 模拟器与替代方案
没有 iPhone 也能在 iPhone Safari 中测试网站：Xcode Simulator、Safari 网页检查器、Playwright 中的 WebKit 以及云端真机服务。
阅读文章 →User agent 切换器是什么：作用、局限与使用场景
User agent 切换器会改变什么，为什么单靠它看不到手机版布局，客户端提示（client hints）起什么作用，以及如何选择安全的扩展。
阅读文章 →如何在电脑上查看网站的手机版：4 种方法
在电脑上打开任意网站手机版的四种方法，每种方法实际显示的是什么，以及快速检查时该用哪一种。
阅读文章 →如何在 Chrome 中以 iPad 或平板视图查看网站
在桌面版 Chrome 中以平板尺寸查看网站的三种方法、当前 iPad 的视口尺寸，以及为什么 iPad Safari 经常拿到桌面版布局。
阅读文章 →viewport meta 标签详解：该怎么写，为什么
移动端 viewport meta 标签的作用、每个页面都需要的那一行代码、应避免的取值，以及 viewport-fit 和 interactive-widget 等新选项。
阅读文章 →网站在手机上显示错乱？11 个原因与解决方法
网站在手机上和电脑上显示不一样的十一个原因：从缺少 viewport 标签、缓存问题，到深色模式和 Safari 的特殊表现。
阅读文章 →什么是响应式网页设计？原理与示例
响应式网页设计详解：起源、核心原则、响应式与自适应设计的区别、现代 CSS 实现方法以及测试方式。
阅读文章 →viewport 是什么？如何查看视口尺寸，以及它为何与屏幕分辨率不同
视口尺寸详解：CSS 像素与屏幕分辨率、设备像素比、布局视口与视觉视口、svh 和 dvh 单位，以及如何查看自己的视口尺寸。
阅读文章 →