缩放iFrame /对象而不裁剪

Question

我正在尝试将http://www.transmog.net的iPhone模拟器嵌入到我们自己的网站中。我有一个表格，供用户填写URL，然后通过移动浏览器传递并显示用户网站。

然而，嵌入式模拟器对于我们的目的而言太大了，我们希望它更小。我目前正试图通过将模拟器放在iFrame中并使用CSS进行缩放/转换，或者做同样的事情来实现这一目标。

然而，如果我缩放到50％，同时缩小模拟器的大小，它也只显示50％并“休息”其余部分。

在这里搜索过，似乎无法找到我想要的答案。

非常感谢任何帮助！

由于

Answer 1

CSS不会通过iframe级联（除非它们与主机页面在同一个域中，并具有seamless属性） - 您必须实例化您想要的任何技术 inside iframe使其内容生效。遗憾的是，使用transmogrifier的自定义设置看起来并不可能。

Answer 2

我会给出一些指针并为每个指针添加注释。

有几个选项取决于你想要投入多少钱来解决这个问题......但是再次看来它似乎是你site中的关键产品，所以我觉得值得投入一些时间。

---

第一个选项：您创建了iphone框架的 svg 版本：

• 如果您不知道SVG是什么，它基本上是一个矢量图形，当您放大和缩小时不会失去质量..在此屏幕上将其视为文本..您没有看到文本你放大时像素化吗？）
• 您可以将svg包含在div中并为其指定css样式：position: relative。
• 在上面的div中，放入另一个div并将css样式设置为position:absolute，然后将其左侧和顶部x和y坐标相对于父div。
• 请勿使用px，而是使用ems。放大/缩小时，像素的可预测性较差（放大和缩小几乎就像让你的内容显示在不同的屏幕分辨率上......但是我们不会进入那个）

---

第二个选项：使用位图

• 类似于上面的..但不是使用iphone的SVG描述..你可以只使用位图..然后将其设置为背景，几乎使用与上面相同的技术..
• 这个解决方案的问题在于，当用户放大和缩小时...你会看到一些图像质量损失（我已经可以看到你的了..缩放500％到它，你会看到边缘像素化（即在边缘看起来粗糙））。再说一次，如果这是我的网站，我会努力让它看起来不错。 HTML5为您提供了执行此操作的所有权力。

---

明确选项：远离 iframe ..这是一个更难选择的选项，它的好处并不适用于您的情况。