DeviceMock.js – Add Device Frames For Any Elements On Webpage

Now a days on the web it is common practice to add device frames for website screenshots to give a feeling that how website looks when opened on that device. It may be browser, desktop, laptop, tablet or mobile screen. If that situation arises for you to create a device mockup, you don’t have to start from scratch designing or you don’t have to be any designer to do that. All you need is a DeviceMock.js library.

devicemockjs add frames devices

Using DeviceMock.js you can easily add device frames for any of the elements (div, img, iframe). It requires jQuery v1.5.0 or higher.

How to use DeviceMock.js in your projects:

<!-- includes -->
<link rel="stylesheet" type="text/css" href="path/to/assets/css/jquery.devicemock.css">
<script src="jquery.js"></script>
<script src="path/to/assets/js/jquery.devicemock.1.0.0.js"></script>
<!-- element -->
<div class="your-selector"><!-- something... --></div>
<!-- script -->
<script type="text/javascript">
type : "browser",
size : "1x",
address : "",
imgPath : "path/to/assets/img/" // path of asset images,
cssPrefix : "df-" // css namespace ( "df-" is default )