让 div 元素“认为”屏幕具有一定的宽度？

Question

好奇是否有办法让元素认为视口具有一定的宽度？

这将用于测试响应式 CSS 实用程序。例如，这个CSS 组件是响应式的，但为了查看行为，用户必须缩小浏览器窗口。

如果有一种方法可以“欺骗”标记测试元素，使其认为视口具有一定的宽度，则无需手动拖动浏览器窗口。

尽管我怀疑它是否已实现，但一种可能性是浏览器开发人员工具公开一个 API，该 API 允许我们选择并通知浏览器某些元素应考虑浏览器以特定视口大小呈现......

离开

在摆弄这个测试时，我意外地发现有一种方法可以在没有开发人员工具的情况下触发媒体查询，那就是使用 ctrl + 缩放视口。这将触发媒体查询，尽管显然没有达到我正在寻找的声明精度。

Answer 1

将其放入一个<iframe>. 该标签创建一个新的窗口上下文，与媒体查询的宽度进行比较。根据此示例，可以操纵 iframe 宽度来模拟不同的设备宽度：

https://codepen.io/anon/pen/jJNyJd

<iframe>Material Design resizer 测试器使用An来模拟浏览器中的不同屏幕尺寸：

https://material.io/tools/resizer/

据我所知，这是实现这一目标的唯一方法。