javascript - 如何在弹出窗口中显示移动预览

Question

我有一个桌面网站，我想显示该网站的移动预览(只是一个弹出屏幕，没有新窗口或其他东西)。网站上的所有元素都是绝对位置，所以我认为一切都需要缩放。做这个的最好方式是什么？我认为这可以通过设置视口(viewport)来完成，但据我所知，不可能只在 1 个 div 上设置视口(viewport)(这是合乎逻辑的)。因此，需要找到另一种解决方案。

Answer 1

这取决于您所说的“网站的移动预览”是什么意思。

我的第一个想法是，移动设备和桌面设备之间的区别可能是由媒体查询决定的——您可以在同一 URL 中包含一个 iframe，确保媒体查询的格式为 width，而不是 device-width。

您在其他地方提到“一切都需要缩放”，这意味着您只需要缩小 View 。在这种情况下，您可以重复 iframe 技巧，并应用 transform: scale( 0.5, 0.5 )。这将减小渲染输出的大小。