电脑怎么看手机网站
把手机网站搬到电脑屏幕上,电脑最直接的看手办法是打开 Chrome 或 Edge,按 F12 调出开发者工具,机网再点那个手机图标。电脑页面会缩成窄窄一条,看手鼠标变成圆点,机网模拟手指点击。电脑这招我用了快八年,看手从最早调试 jQuery Mobile 到现在看响应式布局,机网几乎没变过。电脑
但很多人不知道,看手这背后其实有两种完全不同的机网“看”法。一种是电脑真的用电脑去访问手机网站,另一种是看手让电脑假装自己是一台手机。前者简单,机网后者才是日常刚需。
直接输网址,大概率会被弹回电脑版
你在电脑浏览器地址栏敲下 m.weibo.cn 或者 m.taobao.com,回车。多数时候,服务器会根据 User-Agent 判断你是桌面设备,然后 302 跳转到 www 开头的电脑版页面。手机网站不是看不见,是被重定向藏起来了。我试过用 Safari 关掉 JavaScript 访问 m.jd.com,页面能加载,但图片全裂,按钮点不动——因为手机站大量依赖触屏事件和动态脚本。
所以纯靠改网址,成功率不到三成。剩下七成,得靠工具。
开发者工具是主力,但有个坑
Chrome DevTools 的设备模拟器(Ctrl+Shift+M)能骗过大部分网站。它修改了 User-Agent、屏幕尺寸、触摸支持,甚至设备像素比。我常用 iPhone 14 Pro 的预设看移动端适配,宽度 393px,DPR 3。页面会按手机逻辑渲染,字体、间距、图片懒加载都跟真机接近。
坑在于:模拟终究是模拟。陀螺仪、真实触摸压力、蜂窝网络延迟,这些它给不了。有次我调一个移动端轮播图,模拟器里滑动顺畅,真机上手指一快就卡住。后来发现是 touchmove 事件里做了同步重排,模拟器性能太好掩盖了问题。
另外,有些网站会检测 WebGL 渲染器或屏幕方向 API,模拟器返回的值和真机不一致,照样露馅。遇到这种,只能上真机远程调试。
更彻底的办法:让电脑变成手机
Android 开发者用 Chrome 的 remote debugging,USB 连上手机,电脑上直接开 DevTools 看手机里的页面。iOS 麻烦点,Safari 偏好设置里开“开发”菜单,iPhone 用线连 Mac,才能审查。Windows 连 iPhone 得装 iTunes 驱动,偶尔抽风。
没有真机怎么办?装个 Android 模拟器,比如 BlueStacks 或者 Google 官方的 AVD。里面跑个浏览器,再配合 scrcpy 投屏,效果接近真机。我去年测一个 H5 游戏,模拟器里帧率稳定 60,换到千元真机上掉到 22,这就是差距。
有些网站干脆不让你看
银行类、政务类手机站,检测到模拟器或开发者工具会直接白屏。它们用 WebAssembly 做指纹识别,或者校验触摸事件的 isTrusted 属性。你鼠标点的,isTrusted 是 false,直接拒绝响应。这种时候只能老老实实拿手机看,或者用 mitmproxy 抓包改响应,但那是另一个层面的折腾了。
我个人的习惯:日常快速看布局,DevTools 够用;调交互和性能,必须上真机。电脑看手机网站,本质是场伪装游戏,伪装得再像,底层的输入设备和渲染管线还是露马脚。知道边界在哪,比学会按 F12 更重要。
(责任编辑:休闲)
