准备工作：打开开发者工具
在电脑上用 Chrome 浏览器打开需要调试的页面，按下 F12 或右键选择“检查”进入开发者工具。点击左上角的设备切换按钮（一个手机和平板图标），就能模拟移动端视图。
这时候页面会变成手机屏幕大小，常见的 iPhone、Pixel 等设备都可以从下拉菜单里选，也可以自定义分辨率。
连接真实设备调试
光靠模拟器不够准，有些问题只在真机上出现。比如某个按钮在安卓浏览器里点不动，或者字体显示异常。这时候就得连真实手机。
先在安卓手机上打开 USB 调试模式：设置 → 开发者选项 → USB 调试（没有开发者选项的话，去关于手机连续点版本号）。
用数据线把手机连到电脑，在 Chrome 地址栏输入 chrome://inspect，页面会列出已连接的设备和可调试的标签页。找到你的页面，点“inspect”，就能实时查看元素、网络请求和控制台日志。
常见问题排查场景
有次做活动页，同事说 iOS 上滑动卡顿。我拿 Safari 连 Mac 调试，发现是用了太多 fixed 定位加半透明背景，触发了频繁重绘。换成 absolute + JS 控制后流畅多了。
另一个例子是表单提交在微信内置浏览器里没反应。通过远程调试发现是 e.preventDefault() 没生效，因为事件绑定在动态插入的元素上，改用事件委托才解决。
利用控制台和网络面板
在调试界面中，Console 面板能直接运行 JavaScript，打印变量值。比如想看 window.innerWidth 是多少，直接敲进去回车就行。
Network 面板可以看资源加载情况。移动端网络慢，图片太大或接口响应久都会影响体验。勾选 “Disable cache” 和 “Throttle” 模拟 3G 环境，更容易发现问题。
console.log('当前设备宽度：' + window.innerWidth);<br>if (window.innerWidth < 768) {<br> console.log('当前为移动端');<br>}处理不同浏览器兼容性
国内用户常用 UC、QQ 浏览器，这些基于 WebKit 但有自己的渲染逻辑。有些 CSS 属性支持不完整，比如 grid 布局基本没法用。
遇到样式错乱时，先看是不是用了太新的特性。可以用 caniuse.com 查兼容性，或者降级写法。例如 flex 布局写好 fallback：
.container {<br> display: -webkit-box; /* 老版本 */<br> display: -webkit-flex; /* 中间版本 */<br> display: flex; /* 标准 */<br>}最后别忘了测试微信、支付宝这些 App 内的 WebView，很多 H5 活动都在里面跑，权限和行为都有差异。