レスポンシブデザインインターフェイスを効果的にテストするための 16 のツール

レスポンシブ デザインはデザイナーの間でますます尊重されるようになっており、デザインが合理的で正しいことを検証するための効率的なテスト ツールを見つける必要があります。レスポンシブ ページ デザインをオンラインでテストするのに役立つ 16 のツールを紹介します。皆さんに気に入っていただければ幸いです。

応答者

Responsinator は、さまざまなデバイスのビューポートで Web サイトの効果を表示する機能を提供し、レスポンシブをサポートする必要があるデバイスを簡単に確認できます。デザインレンダリング。

応答者

レスポンシネータとは異なり、レスポンシベータはさまざまなサイズで表示レンダリングを提供します

レスポンシブです

レスポンシブは 5 つのデバイスでプレビュー効果を提供します

レスポンシブ Web デザイン テスト ツール

レスポンシベーターに似ていますが、インターフェースがより単純です

レスポンシブピクセル

ドラッグしてウィンドウ サイズを変更し、さまざまなデバイス画面をシミュレートできます

screenqueri.es

このツールは gbin1 の以前の記事で紹介しました。詳細については、レスポンシブ デザインをオンラインでテストするのに役立つ Web ツールを共有する - Screenqueri.es を参照してください。最も興味深いのは、このツールが Test をサポートしていることです。アプリケーションまたは Web サイトをローカルホスト上にローカルに配置します。

アプタス

レスポンシブ デザインのテストに役立つツール ブラウザー

ブリックス

応答性のテストに役立つブックマーク。ブラウザに簡単に統合できます

Izilla メディア クエリ デバッガー

この JS は、幅と高さを検出するために body 要素に疑似要素を追加するのに役立ちます。もちろん、http://izilla.com.au/git/izilla が提供するブックマークを使用することもできます。 mq .debugger.bookmarklet.html

スクリーンフライ

4 種類のデバイスをサポートし、関連開発のための設計図やドキュメントも提供するオンラインのレスポンシブ デザイン テスト ツールです。詳細については、過去の記事をご確認ください: 異なるクライアントでウェブサイトを閲覧するためのツールを共有する - Screenfly

Firefox 開発者ツール

Firefox を使用している場合は、ショートカット キー (Ctrl + Shift + M) で開発ツールを直接使用できます

ViewPort Resizer

別のブックマーク ツール

ジェイライザー

開発および設計プロセスを促進するために応答性の高いウィンドウを作成するのに役立つ jQuery 応答性開発ツール プラグイン

ブラウザのサイズを変更します

指定された幅と高さで新しいウィンドウを作成するのに役立つシンプルな Web ツール

ジューサー

iPhone、Android、その他のデバイスの表示をサポートする、実際の写真付きのオンライン表示応答ツールです。

っぽい

オンラインでレスポンシブ効果を表示するための比較的新しい Web ツールで、さまざまなサイズの表示をサポートしています。

上記は、私たちが収集した 16 個のオンラインおよびローカルのレスポンシブ テスト ツールです。比較的、オンライン ツールは、開発中のデバッグに適しています。具体的な用途 ニーズに合わせてお選びください。気に入っていただければ幸いです。