Blog

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

2015.07.14Cat:jQueryプラグイン

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

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

http://rm-labo.com/labo/devicemock/

 

デモ

 

以下は設置方法

 

読み込み

jQueryは1.11が良い模様

 

js呼び出し

 

HTML

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

hoshino
ECのことを中心に書きたいと思います。 ネタが無いときはプログラムやデザインのことも書きます。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ