由于我们如今处于一个以移动为先的世界，能够在手机或模拟手机上轻松测试网站变得越来越重要。我与从事网站和社交媒体服务的人员合作，并鼓励他们定期从桌面浏览器以移动视图打开网站。我特别想到的是浏览器的内置“移动视图”功能，它通常隐藏在浏览器提供的所有其他开发人员工具中，但我很乐意考虑任何可以快速设置的功能。
如何从桌面浏览器打开网站的移动视图？
答案1
火狐浏览器：
- 在 Windows/Linux 中，按Ctrl+ Shift+M
- 在 macOS 中，按option+ command+M
您还可以在（“工具”）、“Web 开发人员”、“响应式设计模式”下找到菜单项。
Chrome 和 Edge：
您需要先打开“开发者工具”：
- 在 Windows/Linux 中，按Ctrl+ Shift+I或者F12
- 在 macOS 中，按option+ command+I
一旦开发者工具打开并聚焦，您就可以切换设备模拟：
- 在 Windows/Linux 中，按Ctrl+ Shift+M
- 在 macOS 中，按command+ shift+M
如果您愿意单击按钮而不是按键盘快捷键，开发人员工具工具栏中有一个小按钮可以启用设备模拟。
苹果浏览器：
苹果似乎默认禁用了进入响应式设计模式的键盘快捷键。您可以关注本教程介绍如何配置键盘快捷键。
您可以通过点击“开发”、“进入响应式设计模式”来找到菜单项。如果您看不到“开发”菜单项，则需要通过打开“偏好设置”、“高级”，然后勾选“在菜单栏中显示开发菜单”来启用它。
答案2
Flimm 的回答100% 正确。如果记住快捷键太麻烦，可以使用开发人员工具中的这个蓝色按钮在 Web 视图和移动/平板电脑视图之间切换：
或者使用 Firefox：
启用设备工具栏后，您可以从下拉菜单中选择想要模拟的设备的品牌和型号。
答案3
为了进行测试，我使用以下网站：-
以上两个网站都允许我在多种设备宽度下查看我的网络应用程序。
答案4
在浏览器中添加“用户代理切换器”扩展程序并指定移动用户代理。如果网站是聪明的它将为您提供移动优化版本。
我不会推荐任何特定的扩展。理想的扩展应该内置移动浏览器预设，并能够根据每个网站启用或禁用用户代理切换。