【问题标题】：Is there a way to get Chrome Dev Tools to emulate default zoomed out view of wider-than-screen-width websites for mobile devices?有没有办法让 Chrome 开发工具模拟移动设备的宽于屏幕宽度的网站的默认缩小视图？
【发布时间】：2022-05-05 11:18:25
【问题描述】：
我正在尝试使用 Chrome 的开发工具在众多移动设备上模拟网页的标准呈现。但是，当尝试模拟屏幕分辨率小于我尝试呈现的页面宽度的设备时，我只看到如果我只是通过拖动其边缘来减小桌面浏览器窗口的大小会有效地发生什么。
我知道这很有用，但我希望测试的体验是当移动设备显示网站的缩小视图以适应屏幕时页面的外观（这通常是您在移动设备上看到的网页未配置视口元标记和/或 CSS 媒体查询）。
有什么方法可以使用 Chrome 的开发工具模拟这种默认缩放行为？
【问题讨论】：
标签：
google-chrome
media-queries
google-chrome-devtools
mobile-devices
【解决方案1】：
如果您的意思是将非“没有视口的响应式网站”重新缩放到设备的默认视口以了解重新缩放的样子，您可以或多或少地在视觉上重现它，是的。
点击“屏幕”进行自定义模拟。并手动输入您的目标像素显示width 和height 尺寸作为“分辨率”。对 iPhone 目标说 320 x 480。
然后输入“设备像素比”，即：1 / your-fixed-width * device-width
例如0.3125 % 对于 1024 像素到 320 像素 iPhone 分辨率目标宽度的固定宽度设计。
它会在包含的视口中相应地适合您的固定布局，您可以通过更改浏览器窗口大小或上下移动 Chrome 检查器栏来手动任意重新缩放。
字体不会像真实设备那样清晰明了，但应该可以为您提供准确的视觉布局。
【解决方案2】：
要模拟比当前更大的视口，检查页面（在 Chromium 浏览器中，右键单击页面元素并选择检查或使用 Ctrl+Shift+C Windows 上的快捷键或 Command+Shift+C 在 Mac 上），然后选择视口（Command+Shift+M 在 Mac 上）或单击下面突出显示的图标.从图像顶部的下拉列表中选择桌面，然后选择 50% 或其他缩放。然后，您可以使用突出显示的可拖动边缘调整嵌套视口的大小。