2015/07/15
iPhoneやMacbook proなどの画面でデモを表示させる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 : '/' }); }); |
HTML
|
1 2 3 | <div class="demo1"> <iframe src="/" 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-‘; |
まとめ
お客さん向けのエビデンスとして使えるかと思ったが、微妙なずれがあるようで
正確性が求められる場合は使えないかもしれない、、
Author Profile
SHARE
