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

Posted 2023-03-06

【中文标题】让 div 元素“认为”屏幕具有一定宽度？

【英文标题】：Make a div element "think" that the screen with is a certain width?

【发布时间】：2019-07-18 08:11:45

【问题描述】：

好奇有没有办法让一个元素认为视口有一定的宽度？

这将用于测试响应式 CSS 实用程序。例如这个CSS component is responsive，但要查看行为用户必须缩小浏览器窗口。

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

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

一种方式

在摆弄this test 时，我偶然发现有一种无需开发人员工具即可触发媒体查询的方法，那就是使用 ctrl + 缩放视口。这将触发媒体查询，尽管显然不是我正在寻找的声明精度。

【问题讨论】：

我不确定您要达到什么目的...媒体查询被设计以在特定视口宽度触发。通常，您只需调整浏览器的大小（或者使用 F12 工具）来测试网站在特定宽度下的外观。您是否试图让一个元素不“服从”您的媒体查询？如果是这样的话......为什么不简单地编写查询，以排除目标元素呢？或者创建一个规则，使其在窗口缩小时具有相同的属性？

我试图避免不得不在开发人员工具中操纵视图大小。例如，有一个像u-sm-padding-2rem 这样的响应式实用程序可以设置填充，但只有当视口很小时，测试才会显示这一点，而无需开发人员在开发人员工具中模拟一个小视口。

这里是一些布局测试的例子。我还没有构建响应式的，因为“必须调整视口要求的大小”，如果我现在将它们包括在内，那么查看器将不得不手动设置视口大小（通过开发工具）以查看测试是否正在执行正确的方式：superflycss.github.io/utilities-layout/target/test/html

所以问题要求媒体查询的逆。不是在给定视口大小的情况下触发 CSS，而是让浏览器相信视口是特定元素的特定大小，以便触发媒体查询。

哦，我明白你的意思了。但是不，我不认为这样的机制存在。这不会破坏最初的目的吗？因为您肯定希望在桌面宽度上为您的最终用户提供不同的显示...并且开发人员还需要能够模拟 那个。无法知道您请求的两个视图中的哪一个。我想您可以将“切换”功能构建到浏览器扩展程序或其他东西中，但它仍然需要单击，并且为了付出努力，F12 然后CTRL + SHIFT + M 可能就像单击一样快......

【参考方案1】：

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

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

Material Design 调整大小测试器使用<iframe> 在浏览器中模拟不同的屏幕尺寸：

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

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