Javascript WordPress主题预览器？从哪里开始？

我希望实现一个我开发的WordPress主题的“主题预览”，就像你在最前面看到的那样，它基本上将你的网站或WP主题包装在一个框架中，并允许你将视口更改为各种设备大小，以展示响应能力。下面的链接示例

从哪里开始呢？我在谷歌上搜索了几个小时，想找到从哪里开始的线索。。。没什么

它真的只是将网站包装在一个Iframe中，并使用JS控制Iframe的大小吗？我觉得在某个地方会有一个更干净、更轻的解决方案

我想自己构建这个，或者找一个开源插件。我知道有付费版本，但希望收集意见并找到明确的解决方案

---

提前谢谢

感谢所有人的回复，但我还是采纳了自己的建议，并找到了解决办法。也许有一天会有人发现这很方便，但这里是我使用Jquery的解决方案。是的，我所做的就是创建一个带有标题和iframe的空白页面

我为我的“a”标记分配了唯一ID作为jquery的标识符：

<ul>
  <li class="icon-row"><a id="viewport-change-desktop" href="#"><img src="img/desktop-icon@2x.png" height="48px" width="60px" alt="Desktop Viewport" /></a></li>
  <li class="icon-row"><a id="viewport-change-laptop" href="#"><img src="img/laptop-icon@2x.png" height="30px" width="47px" alt="Laptop Viewport" /></a></li>
  <li class="icon-row"><a id="viewport-change-tablet" href="#"><img src="img/tablet-icon@2x.png" height="25" width="18" alt="Tablet Viewport" /></a></li>
  <li class="icon-row"><a id="viewport-change-mobile" href="#"><img src="img/mobile-icon@2x.png" height="20px" width="9px" alt="Mobile Viewport" /></a></li>
</ul>

现在，我创建的标题栏中的图标将根据我能够设置的值调整包含WordPress主题的iframe的大小。所以,回答我自己的问题。加油

---

嗨，本，我上周偶然发现了你的问题和答案，并亲自尝试了一下。我做了一些修改，但想法还是一样的。希望你不介意我在这里分享。多库。。。我一点也不介意！谢谢分享，网站看起来不错，你们免费提供它真是太好了！谢谢多库。

$( "#viewport-change-desktop" ).click(function () {
  $("iframe").width('100%');
  $("iframe").height('100%');
});
$( "#viewport-change-laptop" ).click(function () {
  $("iframe").width(1024);
  $("iframe").height(768);
});
$( "#viewport-change-tablet" ).click(function () {
  $("iframe").width(768);
  $("iframe").height(800);
});
$( "#viewport-change-mobile" ).click(function () {
  $("iframe").width(320);
  $("iframe").height(568);
});