レスポンシブブレークポイントテスター
任意のURLがさまざまな画面サイズでどのように見えるかをテストします。モバイル、タブレット、デスクトップ、カスタムブレークポイントをプレビューできます。
Some websites block iframe embedding via X-Frame-Options or CSP headers. If a site appears blank, it may not allow iframe loading.
レスポンシブブレークポイントテスターの使い方
- 1テストしたいウェブサイトのURLを入力します。
- 2プリセットブレークポイントを選択：モバイル、タブレット、またはデスクトップ。
- 3またはカスタム幅と高さの寸法を入力します。
- 4選択したビューポートサイズでウェブサイトがどのように表示されるかをプレビューします。
Zenovayアナリティクス
関連ツール
CSSグラデーションジェネレータ
ビジュアルエディタで美しいCSSグラデーションを作成します。直線、放射状、円錐状のグラデーションに対応しています。CSSボックスシャドウジェネレーター
ビジュアルコントロールでCSSボックスシャドウを設計します。オフセット、ブラー、スプレッド、カラーを調整できます。CSSボーダーラディウスジェネレーター
カスタムボーダーラディウス値をビジュアルコントロールで作成します。コーナーをリンクまたはアンリンクして素早く調整できます。CSS Flexboxプレイグラウンド
CSS Flexboxレイアウトを視覚的に学習・生成できます。方向、配置、折り返し、ギャップをリアルタイムで調整できます。よくある質問
レスポンシブテスターはどのように機能しますか？▾
ターゲットURLを異なるビューポートサイズのiframeで読み込み、ウェブサイトが様々なデバイスでどのように見えるかをシミュレートします。iframeの幅はプリセットのデバイス幅に合わせられます。
iframeが空白ページまたはエラーを表示するのはなぜですか？▾
多くのウェブサイトはX-Frame-OptionsまたはContent-Security-Policyヘッダーを設定して、iframeでの読み込みを防いでいます。これはセキュリティ対策です。自分のウェブサイトやiframeの埋め込みを許可するサイトでテストしてみてください。
カスタムビューポートサイズをテストできますか？▾
はい。上部の入力フィールドを使用して、ピクセル単位で任意のカスタムの幅と高さを入力できます。また、プリセットのデバイスサイズに切り替えることもできます。
ブラウザのDevToolsと同じですか？▾
このツールは複数のブレークポイントを一度に視覚的に概観できます。より詳細なレスポンシブテストのために、ブラウザのDevToolsはタッチシミュレーションやネットワークスロットリングなどの追加機能を提供しています。
データはサーバーに送信されますか？▾
いいえ。ツールはブラウザ内のiframeに直接ウェブサイトを読み込みます。URLやデータは外部サーバーに送信されません。
スマートフォンでこのツールを使えますか？▾
はい、レスポンシブテスターはモバイルブラウザで動作しますが、複数のビューポートサイズを表示するには大きな画面の方が便利です。モバイルでは一度に1つのビューポートサイズをテストできます。
どのデバイスプリセットが利用できますか？▾
ツールにはiPhone、iPad、人気のAndroidスマートフォンなどの一般的なデバイスのプリセットが含まれています。CSSで使用する特定のブレークポイントをテストするために、カスタムの幅と高さを入力することもできます。