但是，如果您可以在浏览器中快速快速构建设备模型，该怎么办？
您可以在线找到大量的免费设备模型 ，从PSD到Sketch文件。
他们免费的jQuery插件DeviceMock.js允许您使用简单JavaScript和SVG 将矢量设备包装在任何页面元素上 。
好吧，多亏了rm-labo的员工，您可以！
那么，这到底如何工作？
它带有一个JS文件，CSS文件和一些SVG文件来创建实际的设备。
好吧，首先，您需要一个jQuery副本和一个来自GitHub的DeviceMock插件版本 。
这意味着您甚至可以在您的网站上使用iframe到另一个页面构建一个很棒的微型浏览器 。
您可以定位页面上任何类型的元素 ，从简单图像到整个div，甚至是嵌入式元素（例如iframe）。
该插件支持五种不同的设备类型 ：
- 网页浏览器
- 手机
- 片剂
- 桌面
- 笔记本电脑
而且，它们看上去都与Apple设备非常相似，例如，智能手机是iPhone的复制品，而台式机则明显类似于iMac。
由于所有这些模型都是使用SVG构建的，因此它们均使用平面设计风格 。
所有这些向量都易于添加，并且可以在所有支持SVG的浏览器中使用 。
您甚至可以更改属性，例如模型大小，主题（白色/黑色）和方向（人像风景）。
这是添加更多自定义项的有趣方式。
如果使用浏览器模型，甚至可以在地址栏中指定虚拟URL 。
可以肯定的是，该库并不是对每个人都有用，但它确实解决了许多UI / UX开发人员在进行原型设计时面临的小问题 。
要了解更多信息，请访问GitHub页面或查看实时站点以获取有效的演示。
翻译自: https://www.hongkiat.com/blog/create-device-mockups-browser/