在iframe中复制网站的移动外观

时间:2014-05-01 22:55:57

标签: javascript android html iframe word-wrap

(第一次这样做,所以我希望我做对了)

作为一个更大项目的一部分,我有兴趣能够显示iframe与其他网站的内容,就像在移动设备上查看一样。我知道我可能会在稍后使用特定于移动设备的外观时遇到一些问题,但是对于我当前的测试,我使用的是一个没有特殊移动设计的简单网站。

所以我开始在手机上访问该网站(Galaxy S3)。这是我拍摄的照片,上面是它的样子:http://i.imgur.com/n9rRKIx.png

需要注意的重要事项是文本包装的地方。第一行是“海龟是Chelonii [2]”的爬行动物

现在,如果我要在我的电脑上访问它,第一行将会更长:“海龟是Chelonii [2]的命运爬行动物或以特殊骨骼为特征的Testudines或”

如果我只是调整iframe的大小,它不会自动调整段落等等,使它们更早地换行。

我决定谷歌它,看看我是否能找到一个做同样事情的网站。但是,我试过的每一个都显示错了。所有这些都有比第一行更长的版本。以下是我尝试过的一些内容:

  1. iPhone测试人员
  2. 手机模拟器
  3. Responsivepx
  4. Screenfly
  5. 这是一张显示结果的专辑:http://imgur.com/a/cRaAs

    正如你所看到的,它们中的大部分看起来几乎相同,但它们看起来都不像手机一样。尽管我告诉这些网站使用Galaxy S3预设(如果有的话)。

    为了澄清,我不想找到另一个这样做的网站(除了作为概念证明)。我想知道如何检测文本包装的位置和字体大小,以便我可以在iframe中复制它。

    如果我遗漏了任何重要信息,请告诉我,我会添加它。

0 个答案:

没有答案