無料のレスポンシブデザインテスターあらゆる画面サイズでのページを一度に確認。

はい。アカウント不要、デバイスやページ数の制限なし、スクリーンショットにウォーターマークなし、インストールも不要で、ブラウザで動作します。

サイトのURLを入力するかHTMLを貼り付け、40種類以上のスマホ、タブレット、ノートPC、デスクトップのサイズから選んで、1台ずつまたは並べて表示します。フレームを任意の幅にドラッグしたり、回転させたり、一般的なブレークポイントに切り替えたりできます。

各フレームは、その画面の幅と高さをCSSピクセルで正確に再現したブラウザのビューポートです。メディアクエリ、レイアウト、ブレークポイントはそのデバイスと同じように反応します。

はい。HTMLを貼り付けるか.htmlファイルを開くと、あらゆるサイズでプレビューしながらリアルタイムで編集できます。Webサイトはhttpsで読み込まれます。ローカルの開発サーバーの場合は、httpsトンネルを使うかビルド済みのHTMLを貼り付けてください。

はい。HTML内で、スマホで横スクロールが発生する主な原因である画面より幅の広い要素を指摘し、viewportのmetaタグがない場合は警告します。

はい、貼り付けたHTMLであれば可能です。表示範囲またはページ全体を、デバイスのピクセル比でPNGとして保存します。たとえば幅393ピクセルのフレームを3xで保存すると、幅1179ピクセルの画像になります。

スマホは1 CSSピクセルに2〜4個の物理ピクセルを詰め込んでいます。表示はその比率を示し、貼り付けたHTMLのスクリーンショットはその比率で保存されるため、実際の画面と同じ精細さになります。

いいえ。Webサイトはフレーム内で、ブラウザによってそのサイトのサーバーから直接読み込まれ、間にプロキシは入りません。貼り付けたHTMLとスクリーンショットはブラウザ内にとどまり、最後に開いたページと設定はこのブラウザのストレージに保存されます。

サイトによっては、ほかのページ内に表示されないよう設定しています。「空白になる理由」を開いてサイトのヘッダーを確認するか、代わりにページのHTMLを貼り付けてください。