レスポンシブデザインテスター
オンラインで利用できるレスポンシブデザインテスター。インストール不要。複数のデバイス画面でページをテスト可能
レスポンシブデザインテスターについて
レスポンシブデザインテスターは、異なる画面サイズでウェブサイトがどう見えるかをプレビューします。URL を入力し、スマートフォン、タブレット、デスクトップ解像度などのデバイスプリセットを選ぶか、幅と高さを自分で設定すると、そのサイズの枠の中にページが描画されます。縦向きと横向きを切り替え、その場で回転できます。ブラウザのウィンドウサイズを変えずに、よくあるブレイクポイントをまたぐレイアウトを手軽に確認できます。
使い方
1. ウェブサイトの URL を入力し、読み込みをクリックします 2. デバイスプリセットを選ぶか、カスタムを選んで幅と高さを入力します 3. プリセットでは縦向きと横向きを切り替えるか、回転を使います 4. そのサイズでプレビュー枠に描画されるページを確認します
より良い結果のためのヒント
プリセットは小型スマホからフル HD デスクトップまでの一般的なサイズをカバーし、多くのレイアウトが想定するブレイクポイントに合っています。リストにない正確なピクセルサイズが必要な場合はカスタムを使います。一部のウェブサイトは埋め込みを拒否し、空の枠を表示します。これはサイト側のセキュリティ設定であり、ツールの不具合ではありません。埋め込みを許可するページは完全に描画され、操作も可能です。
▶一部のサイトでプレビューが空になるのはなぜですか？
多くのサイトはセキュリティのため、別のページの枠内に表示されるのを防ぐヘッダーを送信します。その場合プレビューは空のままで、これはツールではなくサイト側の制限です。
▶どんなデバイスサイズがありますか？
小型および大型スマホ、2 種類のタブレット、デスクトップ HD とフル HD 解像度など、一般的なプリセットが複数あります。カスタムでは任意の幅と高さを入力できます。
▶縦向きと横向きはどう機能しますか？
プリセット選択中に縦向きと横向きを切り替えると、幅と高さが入れ替わります。回転ボタンで瞬時に切り替えられます。
▶プレビューは操作できますか？
はい。スクリプトとフォームを許可したサンドボックス枠内でページが動くため、実機サイズと同じようにリンクをクリックしたりスクロールや入力ができます。
▶実際のブラウザサイズは変わりますか？
いいえ。ツールは自身のプレビュー枠のサイズを変えるだけで、ブラウザのウィンドウはそのままです。
このツールがあなたに役立ったなら、私にコーヒーをご馳走することをお勧めします。
私にコーヒーを買ってください。