我将给出一些指示并为每个指针添加注释。
有几个选项取决于您想在解决这个问题上投入多少资金。但话又说回来,它似乎是您网站中的一个关键产品,所以我认为值得花一些时间来解决这个问题。
第一个选项:您创建iphone 框架的svg版本:
- 如果您不知道 SVG 是什么,它基本上是一个矢量图形,当您放大和缩小时不会损失质量.. 将其视为此屏幕上的文本.. 当您看到文本像素化时放大吗?)
- 您可以将 svg 包含在 div 中,并为其赋予 css 样式:
position: relative
。
- 在上面的 div 中,放置另一个 div 并将 css 样式设置为,
position:absolute
然后将其设置为相对于父 div 的左侧和顶部 x 和 y 坐标。
- 不要使用 px,而是使用 ems。当您放大/缩小时,像素的可预测性较差(放大和缩小几乎就像让您的内容显示在不同的屏幕分辨率上......但我们不要进入那个)
第二种选择:使用位图
- 与上面的类似..但不是使用 iphone 的 SVG 描述..您可以只使用位图..然后将其设置为背景并几乎使用与上述相同的技术..
- 这个解决方案的问题是当用户放大和缩小时..你会看到一些图像质量损失(我已经可以用你的..放大500%,你会看到边缘像素化(即看起来很粗糙)在边缘))。同样,如果这是我的网站,我会努力让它看起来不错。HTML5 为您提供了执行此操作的所有功能。
明确的选择:远离iframe .. 这是一个更难的选择,它的好处不适用于您的情况。