iPhoneやMacbook proなどの画面でデモを表示させるjQueryプラグイン

iPhoneやMacbook proなどの画面でデモを表示させるjQueryプラグインを使ってみた。

ダウンロードはこちらから

以下は設置方法

読み込み


&lt;link href="jquery.devicemock/css/jquery.devicemock.css" rel="stylesheet" type="text/css"&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.devicemock/jquery.devicemock.1.0.0.js"&gt;&lt;/script&gt;

1

2

3

jQueryは1.11が良い模様

js呼び出し


$( document ).ready(function()
{
	$('.demo').deviceMock(
	{
		type        : 'phone',
		size        : '5x',
		theme       : 'black',
		orientation : 'portrait' ,
		imgPath     : 'jquery.devicemock/img/',
		address     : '/'
	});
});

1

2

3

4

5

6

7

8

9

10

11

12

$( document ).ready(function()

{

$('.demo').deviceMock(

{

type : 'phone',

size : '5x',

theme : 'black',

orientation : 'portrait' ,

imgPath : 'jquery.devicemock/img/',

address : '/'

});

HTML


&lt;div class="demo1"&gt;
    &lt;iframe src="/" border=0 width=480 height=500 frameborder=0&gt;&lt;/iframe&gt;
&lt;/div&gt;

1

2

3

</div>

widthとheightは適切なものを入れる必要有り

widthは100%でいけたが、heightの指定方法が不明。iPhoneの解像度を入れても微妙にずれてしまったりしたので

テストしながら使ったほうが良さそう

各パラメータ

パラメータ	デフォルト値	説明
type	browser	browser, phone, tablet, desktop, or laptop
size	3x	1x, 2x, 3x, 〜 9x
theme	black	phoneかtabletの時だけ使用可black or white
orientation	portrait	phoneかtabletの時だけ使用可black or white
address	none	phoneかtabletの時だけ使用可 example : ‘http://example.com’
imgPath	./jquery.devicemock/img/	付属のimgの場所example : ‘./assets/img/’
cssPrefix	df-	CSSのネームスペース-> $prefix : ‘.df-‘;