Javascript 如何在移动设备上创建html代码预览？

我是否可以创建一个按钮，创建一个弹出窗口/模式来模拟移动设备上html代码的可视化

我有一个文本区，用户可以在这里输入html代码并通过电子邮件发送

我想在iphone等移动设备上创建此html代码的预览。我试着使用一个iframe 960x580，它看起来太大了（我有一个大显示器），但是如果我使用一个较低的显示器，同样的iframe看起来很奇怪。这将是我界面上的一项功能，所以我不能使用Chrome的“设备模式”之类的工具

---

有人知道我该怎么做吗？

Chrome Canary有一个方便的功能

---

它可以让你选择很多不同的设备，虽然它不是一个真正的模拟器，但它是一个有用的预览工具。

你看过这个网站吗？：

---

只需输入您的网站URL，您就可以选择要在其上查看的设备类型。

许多模拟器都可以完成这项工作

用于chrome的Ripple仿真器

---

以上是一些测试网页的好方法

我见过这个工具和其他类似的工具。这对我不起作用，因为我的界面上需要这个控件，它对用户来说就像一个“功能”，明白吗？用户插入他的HTML代码，他可以检查该代码在移动设备上的外观。@boom，在这种情况下，您应该使用javascript或Jquery打开一个具有适当维度的新窗口，请参见链接：Note然而，这并不能解决任何可能存在的像素密度差异所导致的缩放问题。@Jeremy Wilken的答案是好的，但我只想补充一点，iframe在屏幕上看起来“太大”的原因是像素密度（PPI）的差异。大多数桌面屏幕通常每英寸有72到100像素，但视网膜iPhone每英寸有300像素。你应该使用HTML实体。请看我对@Jeremy Wilken的回答的评论。@Elle我可以模拟那些像素吗？@Placboom，就是这样，不同的设备会有不同的像素密度和大小。很难解释这些变化。即使是Photoshop，它的“打印大小”按钮也很难做到这一点。（打印图形通常为300 DPI，而显示器传统上约为72 PPI。）因此，据我所知，Photoshop只需将预览缩放到其原始分辨率的1/4，就可以更好地在屏幕上近似文档的实际打印大小。你可以试着按照这些思路做一些事情，但是你会发现一些瑕疵和模糊的文本。