在不裁剪的情况下缩放 iFrame/对象答案

【问题标题】：Zoom iFrame/Object Without Cropping在不裁剪的情况下缩放 iFrame/对象
【发布时间】：2013-02-21 22:06:45
【问题描述】：

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

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

但是，如果我放大到 50%，同时减小模拟器的大小，它也只会显示 50% 并“裁剪”其余部分。

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

任何帮助将不胜感激！

谢谢

【问题讨论】：

一个 jsfiddle 会有很大帮助
以前从未使用过 jsfiddle，但已将相关信息放在这里：jsfiddle.net/3Hm29/1 它没有运行，无法解决原因，但您可以在此处找到我的问题的链接：qsavvyrestaurants.com/sim/preview.html前两个“示例”是我尝试放大的，底部是原始大小的版本。谢谢！
一个 jsfiddle 应该有某种输出.. 如果你使用图像，你可以使用图像托管站点将它们链接到你的 jsfiddle.. 你的没有任何输出
嘿，汤姆，请把其中一个答案标记为正确，否则请解释为什么两者都不能满足您的需求。这就是促使本网站用户花时间回答您的问题的原因。

【解决方案1】：

CSS 不会通过 iframe 级联（除非它们与主机页面在同一个域中，并且具有 seamless 属性）——您必须实例化您想要的任何技术内部 iframe 使其对其内容生效。遗憾的是，使用变形器的自定义设置似乎无法做到这一点。

【讨论】：

不一定只通过 CSS 来实现。基本上无论如何我可以“缩小”框架/或类似框架的内容？
zoom 是transform 缩放内容能力的简写。本质上，这是非常多的 CSS 东西。但我想说的是，不同域上的 iframe 不允许你篡改它们的内容——无论是 HTML、CSS 还是 JS——所以即使有，例如，用于缩放内容的 HTML 解决方案，它也不会对您没有帮助，因为呈现的内容与您在其域上的代码无关。这就是为什么您可以通过有限数量的配置设置：因为没有其他方法可以影响内容。
简而言之，框架是个坏主意
@abbood 不一定——对于嵌套具有自己谨慎上下文的网页，它们非常有用：没有它们，OP 提到的服务将无法实现。其他日常网络功能，如 YouTube 嵌入、Facebook 数据共享和 Disqus cmets，都可以很容易地包含其他服务的功能，而不会影响您或其安全性。但由于这种安全性，您无法篡改 iframe 内（或外！）的代码。

【解决方案2】：

我会给出一些指针，并为每个指针添加 cmets。

根据您想在解决此问题上投入多少资金，有多种选择。但话又说回来，这似乎是您的 site 中的一个关键产品，所以我认为值得花一些时间。

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

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

第二个选项：使用位图

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

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

【讨论】：