可通过五种方法在桌面版chrome中模拟移动端访问：一、开发者工具设备模拟；二、命令行启动指定ua与窗口尺寸；三、安装ua切换扩展；四、自定义设备参数并保存；五、结合网络节流与传感器模拟真实环境。
如果您希望在桌面版谷歌浏览器中访问移动端网页，但页面仍以PC版样式加载，则可能是由于服务器依据当前浏览器的 User-Agent 标识与视口参数判断设备类型。以下是实现手机访问模拟的多种方法：
一、使用开发者工具启用设备模拟模式
该方式通过 Chrome 内置的设备模拟功能同步调整屏幕尺寸、设备像素比（DPR）、触摸事件支持及默认 User-Agent 字符串，适用于单次响应式布局验证与触控交互测试，所有更改仅对当前标签页生效。
1、在 Chrome 中打开任意目标网页。
2、按下 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS） 打开开发者工具。
3、点击开发者工具左上角的 手机/平板图标（Toggle device toolbar），或直接按 Ctrl+Shift+M（Windows/Linux）或 Cmd+Shift+M（macOS） 进入设备模拟模式。
4、在顶部设备下拉菜单中选择预设机型，例如 iPhone 15 Pro 或 Pixel 8，页面将自动应用其分辨率、DPR 与 UA。
5、点击顶部旋转图标可切换竖屏（Portrait）与横屏（Landscape）方向，观察媒体查询触发效果。
6、鼠标指针变为触控点样式，支持拖拽模拟滑动、右键长按模拟 touchstart/touchend 事件。
二、通过命令行启动 Chrome 并强制指定 UA 与视口
该方法在进程启动时全局注入 UA 字符串与初始窗口尺寸，对所有新建标签页生效，适用于隔离测试环境或需固定为某类移动设备的自动化场景，且不影响已运行的 Chrome 实例。
1、彻底关闭所有 Chrome 进程，包括后台的 chrome.exe（Windows）、Google Chrome Helper（macOS）或 google-chrome（Linux）。
2、在 Windows 命令提示符中执行：chrome.exe --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1" --window-size=390,844。
3、在 macOS 终端中执行：open -a "Google Chrome" --args --user-agent="Mozilla/5.0 (Linux; Android 13) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.6099.210 Mobile Safari/537.36" --window-size=412,915。
4、在 Linux 终端中执行：/opt/google/chrome/google-chrome --user-agent="Mozilla/5.0 (iPad; CPU OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1" --window-size=820,1180。
5、启动后新窗口默认以指定 UA 发起请求，并按设定尺寸渲染，无需刷新即可加载手机版页面。
三、使用 Chrome 扩展程序一键切换设备配置
安装轻量级扩展可实现多预设 UA 与分辨率组合的一键调用、域名白名单自动匹配、以及保存常用设备配置为快捷入口，适合高频跨设备兼容性测试与团队协作场景。
1、访问 Chrome 网上应用店，搜索并安装 User-Agent Switcher and Manager 或 Quick UA Switcher。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
2、安装完成后点击地址栏右侧拼图图标，找到对应扩展并点击进入配置页。
3、在设置界面中点击 Add new user agent，填写名称（如“Android Chrome 120 + Pixel 8”）、完整 UA 字符串及关联的宽度、高度、DPR 参数。
4、保存后，在扩展弹窗中选择该预设，即可立即切换当前标签页的 UA 与视口，部分扩展支持自动刷新页面。
5、可在扩展设置中启用 Auto-switch by domain，例如对 example.com 自动应用 iPhone UA，其余站点保持默认。
四、自定义设备参数并保存为常用配置
当预设设备无法覆盖测试需求（如小众折叠屏、车载系统或定制分辨率终端）时，可通过编辑器手动创建设备模型，包含精确的宽高、DPR、UA 及是否启用触摸，后续可从设备下拉菜单快速调用。
1、在设备模拟模式下，点击设备工具栏右上角三个点图标 → Edit…。
2、点击 Add custom device，输入设备名称（如“Foldable Galaxy Z Fold5”）。
3、填写宽度 2280px、高度 1760px、设备像素比 3.0，并在 User agent 字段粘贴对应字符串（如 Mozilla/5.0 (Linux; Android 14; SM-F946B) AppleWebKit/537.36…）。
4、勾选 Enable touch events，确保 JavaScript 触控监听器可被触发。
5、点击 Save，该设备即出现在设备下拉菜单顶部，可随时一键激活。
五、结合网络节流与传感器模拟真实移动端环境
仅调整视口与 UA 不足以复现真实用户行为，还需模拟弱网加载、延迟响应及设备传感器数据（如地理位置、陀螺仪），以验证降级逻辑、骨架屏、懒加载与方向感知功能。
1、在设备模拟模式下，点击设备工具栏中的 Network 下拉菜单，选择 Slow 3G 或自定义带宽（如下载 40 kbps、上传 20 kbps、延迟 1000 ms）。
2、点击右上角三点图标 → More tools → Sensors，在 Sensors 面板中设置 Geolocation（如纬度 39.9042、经度 116.4074）与 Device orientation（如 alpha 0、beta 90、gamma 0）。
3、返回页面，刷新后 Network 面板显示节流状态，页面加载时间延长，JavaScript 可通过 navigator.geolocation 和 DeviceOrientationEvent 获取模拟数据。
4、在设备工具栏中点击 Throttling 按钮旁的齿轮图标，可保存当前网络与传感器配置为预设档位，供后续复用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
