レスポンシブサイトテスト（スマートフォン・タブレット・パソコンで表示）

レスポンシブサイトテスト（スマートフォン・タブレット・パソコンで表示）: 用途

公開前に、あらゆる画面サイズでサイトが動作するか確認しましょう。アドレスを入力すると、小型スマートフォン（360 px）、iPhone SE（375 px）、iPhone 15（393 px）、タブレット（768 px）、ノートPC（1366 px）、フルHD（1920 px）が、それぞれ実際の幅で、画面に収まるよう縮小されて並んで表示されます。

横向きへの回転、任意の幅の作成、すべてのフレームの一括再読み込みもできます。localhost や、他のサイト内での表示を許可しているサイトで使えます。セキュリティ（X-Frame-Options）で拒否するサイトは空白になり、ページにその理由が表示されます。

使い方

1. サイトのアドレスを入力します。
2. 画面とズームを選びます。
3. フレーム間をスクロールして、レイアウトを確認します。

使うタイミング

• 公開前にサイトを確認する。
• スマートフォンでの見え方をお客様に見せる。
• メディアクエリをテストする。

よくある質問

空白で表示されるサイトがあるのはなぜですか？

多くのサイト（Google、Instagram、銀行など）は、クリックジャッキング詐欺を防ぐため、他のサイト内での表示を禁止するセキュリティヘッダー（X-Frame-Options または frame-ancestors）を送っています。自分のサイトは通常表示されます。表示されない場合、そのサイトにもこの保護が設定されているということで、それは良いことです。

実際のスマートフォンで見るのと同じですか？

幅は同じなので、レイアウト、メディアクエリ、改行は同じになります。違うのは、タッチの種類、システムフォント、画素密度です。

まだ自分のパソコン上にあるサイトをテストできますか？

できます。http://localhost:3000 のようなローカルのアドレスを入力してください。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール