DeviceMockを使用してブラウザでデバイスモックアップを作成する

PSDからSketchファイルまで、何トンもの無料のデバイスモックアップをオンラインで見つけることができます。しかし、早くできたら オンザフライでデバイスモックアップを構築 あなたのブラウザで?

ええと、rm-laboの皆さん、ありがとうございます。彼らの無料のjQueryプラグイン、DeviceMock.jsはあなたを可能にします 任意のページ要素を囲むようにベクターデバイスをラップする, 簡単なJavaScriptとSVGを使う.

だから、これはどのように正確に機能しますか?

まあ、まずあなたが必要 jQueryのコピー そして GitHubのDeviceMockプラグインのバージョン. これには、実際のデバイスを作成するためのJSファイル、CSSファイル、およびいくつかのSVGファイルが付属しています。.

あなたはできる あらゆる種類の要素をターゲットにする 単純な画像からdiv全体、さらにはiframeなどの埋め込み要素まで、ページ上に表示されます。これはあなたができることを意味します かっこいいミニブラウザを作る あなたのサイトの他のページへのインラインフレーム.

このプラグインは 5種類の機器タイプ：

これらのモックアップはすべて使用しています フラットデザインスタイル SVGで構築されているからです。そして、それらはすべてAppleデバイスと非常によく似ています。例えば、スマートフォンはiPhoneのクローンであり、デスクトップモニタはiMacのように目立つように見えます。.

これらすべてのベクトルは簡単に追加でき、それらは SVGをサポートしているすべてのブラウザ.

できます プロパティを変更する モックアップのサイズ、テーマ（白/黒）、向き（縦長など）.

ブラウザのモックアップを使えば ダミーURLを指定 アドレスバーにこれはさらにカスタマイズを加える楽しい方法です。.

このライブラリは誰にとっても役立つものではないと思いますが ニッチ問題を解決しますか プロトタイプ作成時に多くのUI / UX開発者が直面すること.

詳細については、 GitHubページ またはチェックアウト ライブサイト アクティブなデモ用.