Import libraries.

Your basic markup and JavaScript should look like this.

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

               $('[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 landscape or portrait
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-';

jquery.devicemock.js licensed under MIT license.
You are free to use jquery.devicemock.js for your personal or commercial websites projects.

The latest source code is available on GitHub.