Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Device Mockups con JavaScript

Device Mockups con JavaScript 30.SEP.15

Alvaro José Rios Ch
Fundador WebBizarro

DeviceMock.js es una librería muy útil que nos permite crear Mockups de diferentes dispositivos y colocar el contenido que deseamos, esto nos permite con algunas pocas líneas mostrar una pequeña vista previa en un navegador o en un dispositivo móvil por ejemplo.

Para usarlo solo debemos importar la librería y Jquery.

<link rel="stylesheet" type="text/css" href="path/to/assets/css/jquery.devicemock.css">
<script src="jquery.js"></script> <!--  v1.5.0? -->
<script src="path/to/assets/jquery.devicemock.js"></script>

Luego de eso debemos colocar el contenedor con nuestro contenido, puede ser un div una imagen o un iframe.

<div class="selector">
    <!-- some contents (div , img , iframe ...) -->
</div>

Y un poco de JavaScrip para configurar la librería

$('.selector').deviceMock({
    type: 'browser', // browser , phone , tablet , desktop , laptop
    size: '1x', // null(1x) , 2x , 3x , 4x , 5x
    theme: 'black', // black , white (if phone or tablet)
    orientation: 'portrait' , // landscape , portrait (if phone or tablet)
    address: 'http://example123.com' // show on URL BAR
});

Finalmente tendrán algo como esto

Como pueden ver una libraría muy útil simple de usar y con muchas posibles aplicaciones.