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