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 回答