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

2015.07.14・Cat：jQueryプラグイン

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

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

以下は設置方法

読み込み

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

jQueryは1.11が良い模様

js呼び出し

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

$( document ).ready(function()

{

$('.demo').deviceMock(

{

type : 'phone',

size : '5x',

theme : 'black',

orientation : 'portrait' ,

imgPath : 'jquery.devicemock/img/',

address : 'http://sterfield.co.jp/'

});

HTML

<div class="demo1">
    <iframe src="http://sterfield.co.jp/" border=0 width=480 height=500 frameborder=0></iframe>
</div>

</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-‘;