alvarlaigna/devicemock

jquery.devicemock.js

Demo

Demo is here.

Usage

Import libraries.

<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>

Your basic markup and JavaScript should look like this.

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

$('.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
});

You can custmize path of asset img dir and css prefix. The following is the default value.

$('.selector').deviceMock({
   //・・・・
   imgPath     : './jquery.devicemock/img/', // path of asset img dir
   cssPrefix   : 'df-'                       // css namespace
});

Multiple installation example with data attribute.

<!-- browser -->
<div style="width:300px;" data-devicemock-type="browser" data-devicemock-size="2x" data-devicemock-theme="" data-devicemock-orientation="" data-devicemock-address="http://example123.com">
   <img src="path/to/img.jpg">
</div>

<!-- tablet -->
<div data-devicemock-type="tablet" data-devicemock-size="4x" data-devicemock-theme="black" data-devicemock-orientation="landscape" data-devicemock-address="">
   <div>
      <!-- some inner contents (div , img , iframe ...) -->
   </div>
</div>

$('[data-devicemock-type]').each(function(i){
   var that = this;
   var opt  = {};
   var object = [
               'type',
               'size',
               'theme',
               'orientation',
               'address'
            ];
   for (prop in object) {
      var data = $(that).data('dm-'+object[prop]);
      if (object.hasOwnProperty(prop)) {
         opt[object[prop]] = data;
      }
   }
   $(that).deviceMock(opt);
});

##Available Options

Parameter	Type	Default value	Description
type	string	browser	Could be browser, phone, tablet, desktop, or laptop
size	string	3x	Could be 1x, 2x, 3x, 〜 9x
theme	string	black	only when type is phone or tablet. Could be black or white
orientation	string	portrait	only when type is phone or tablet. Could be black or white
address	string	none	only when type is browser. example : 'http://example.com'
imgPath	string	./jquery.devicemock/img/	path of asset img dir example : './assets/img/'
cssPrefix	string	df-	css namespace Please refer to the scss file if you want to change. -> $prefix : '.df-';