google-chrome - 有没有办法让 Chrome 开发工具模拟移动设备的宽于屏幕宽度的网站的默认缩小 View ？

Question

我正在尝试使用 Chrome 的开发工具在众多移动设备上模拟网页的标准渲染。但是，当尝试模拟屏幕分辨率小于我尝试呈现的页面宽度的设备时，我只看到如果我只是通过拖动其边缘来减小桌面浏览器窗口的大小会有效地发生什么。

我知道这很有用，但我希望测试的体验是当移动设备显示网站的缩小 View 以适合屏幕时页面的外观(这通常是您在移动设备上看到的网页时'未配置视口(viewport)元标记和/或 CSS 媒体查询)。

有什么方法可以使用 Chrome 的开发工具模拟这种默认的缩放行为？

Answer 1

如果您的意思是将非“没有视口(viewport)的响应站点”重新缩放到设备的默认视口(viewport)以了解重新缩放的样子，您可以或多或少地在视觉上重现它，是的。

单击“屏幕”进行自定义仿真。并手动输入您的目标像素显示width和 height尺寸为“分辨率”。说320 x 480对于 iPhone 目标。

然后输入一个“设备像素比”，即:1 / your-fixed-width * device-width例如对于 1024 像素到 320 像素 iPhone 分辨率目标宽度的固定宽度设计，为 0.3125 %。

它将相应地在包含的视口(viewport)中适合您的固定布局，您可以通过更改浏览器窗口大小或上下移动 Chrome 检查器栏来手动重新缩放。

字体不会像真实设备那样清晰明了，但这应该可以为您提供准确的视觉布局。