0

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

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

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

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

任何帮助将非常感激！

谢谢

4

2 回答 2

0

CSS 不会通过 iframe 级联（除非它们与主机页面在同一个域中，并且具有该属性）——您必须在seamlessiframe中实例化您想要的任何技术，以使其对其内容生效。可悲的是，使用变形器的自定义设置这看起来是不可能的。

于 2013-02-21T13:54:54.680 回答
0

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

有几个选项取决于您想在解决这个问题上投入多少资金。但话又说回来，它似乎是您网站中的一个关键产品，所以我认为值得花一些时间来解决这个问题。

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

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

第二种选择：使用位图

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

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

于 2013-02-21T14:00:22.913 回答