iPhoneやMacbook proなどの画面でデモを表示させるjQueryプラグイン
2015.07.14・Cat：jQueryプラグイン
iPhoneやMacbook proなどの画面でデモを表示させるjQueryプラグインを使ってみた。
ダウンロードはこちらから
http://rm-labo.com/labo/devicemock/
以下は設置方法
読み込み
|
1 2 3 |
<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呼び出し
|
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 : 'http://sterfield.co.jp/' }); }); |
HTML
|
1 2 3 |
<div class="demo1"> <iframe src="http://sterfield.co.jp/" border=0 width=480 height=500 frameborder=0></iframe> </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-‘; |
まとめ
お客さん向けのエビデンスとして使えるかと思ったが、微妙なずれがあるようで
正確性が求められる場合は使えないかもしれない、、
