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 - DeviceMock.js - Add Device Frames For Any Elements On Webpage

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">
$(".your-selector").deviceMock({
type : "browser",
size : "1x",
address : "https://example123.com",
imgPath : "path/to/assets/img/" // path of asset images,
cssPrefix : "df-" // css namespace ( "df-" is default )
});
</script>

Website: http://rm-labo.com/labo/devicemock/
Github: https://github.com/rm-labo/devicemock

e8e19294f401b1269489c0033aee5047?s=100&d=mm&r=g - DeviceMock.js - Add Device Frames For Any Elements On Webpage

Founder of HinduGeek, WordPress Developer, Blogger, and Tech Enthusiast.