Javascript 使用HTML格式的页面平铺创建网站

如何使用HTML5和JavaScript创建一个网站，为您提供多个网站的概览

显示的网页应在屏幕上显示为平铺。因此，它们需要缩小显示，就像我做屏幕截图并缩小尺寸一样

浏览器窗口应如下所示：

++==============================================================++
|| shrinked website a | shrinked website b | shrinked website c ||
||--------------------+--------------------+------------------- ||
|| shrinked website d | shrinked website e | shrinked website f ||
||--------------------+--------------------+------------------- ||
|| shrinked website g | shrinked website h | shrinked website i ||
++==============================================================++

我不想使用iFrame，因为我认为它们无法缩小尺寸。瓷砖也不必具有响应性

---

这是否可能以某种方式实现？

您必须使用

iframe

并使用css来定位每个帧。有关iframe标记的更多信息可以在此处找到

---

注意：加载9个iFrame，每个iFrame都包含一个完整的网页，这会降低页面速度，并会给用户带来糟糕的体验。

下面的文章提供了创建页面屏幕截图以平铺形式显示的解决方案：

中还介绍了如何使用不使用PHP，而仅使用HTML5和JavaScript来实现此目的

然后，只需缩小它们的大小并使用JavaScript填充即可

---

感谢您的评论，FAngel

您应该使用生成的屏幕截图，而不是将完整的站点加载到iframe中…我同意。。你所说的是响应性设计，其他现场站点可能没有响应性（更不用说iFrame对于响应性设计来说是个坏主意）。屏幕截图和简单的CSS响应布局将为您提供所需的内容假设您应该看看此处提出的一些解决方案：。在你有了一张图片之后——按照你的想法创建一个布局应该不会有任何问题。然后我需要网站的最新图片。它们应该以某种方式自动创建和填写。但我不想实际使用PHP。谢谢FAngel，你的链接似乎有解决方案，但这不允许缩小网站视图。谢谢，但我认为iFrame不能缩小。啊，我在考虑iFrame的高度和宽度，但这不允许缩小iFrame内的内容。在这种情况下，我可以问一下，如果要缩小框架的尺寸，为什么它们需要可用/交互式（即iFrame）？当然，正如其他人所建议的那样，截图是一个更好的选择？它们不需要响应，但它们需要自动创建，最好只使用HTML5和JavaScript