Loading... ![无图片描述][1] 演示地址： [https://slt.zhaoshuai.me/][2] Github地址： [https://github.com/inger0/slt.zhaoshuai.me][3] 在网页中输入自己的网址链接，然后go！ 就可以看到效果了 需要自己使用截图工具，手动截图 ## 原理 ## ![无图片描述][4] 使用四个`iframe` 代表电脑、手机、平板 ，然后在其中展示网页内容，就有上面的效果了。 同时四个`iframe` 使用css 控制不同大小尺寸 ## 不适用非自适应站点 ## 其实，这个有个弊端，就是只能模拟出浏览器大小，如果是**自适应网站**确实可以达到那样的效果 但是，非自适应网站，用这个在线生成就尴尬了，例如百度首页 ![无图片描述][5] 这里完全被遮挡了，百度首页就是非自适应的，手机端，访问`www.baidu.com` 会跳转到 `m.baidu.com` ![无图片描述][6] [1]: http://assets.z2blog.com/imgbed/2020/01/02/20200102750044.png [2]: https://slt.zhaoshuai.me/ [3]: https://github.com/inger0/slt.zhaoshuai.me [4]: http://assets.z2blog.com/imgbed/2020/01/02/20200102544800.png [5]: http://assets.z2blog.com/imgbed/2020/01/02/20200102264682.png [6]: http://assets.z2blog.com/imgbed/2020/01/02/20200102769678.png Last modification：January 2nd, 2020 at 08:41 pm © 允许规范转载