HTML/CSS プレビュー
幅を調整できる隔離 iframe でレスポンシブレイアウトを比較します。
スクリプトは削除され、実行されません。プレビューは allow-scripts なしの sandbox iframe を使います。ネイティブ端末、DPR、実際のブラウザーとの完全な一致は再現しません。
モバイル
デスクトップ
使い方
使い方
- HTML と CSS を別々のエディターに貼り付けます。
- モバイルとデスクトップの幅を調整します。
- 両方を確認します。ネイティブ端末や DPR のエミュレーターではありません。
スクリプトは実行されません
srcdoc に入れる前に script とインラインイベント属性を削除し、allow-scripts なしの sandbox="" iframe を使います。
幅を調整
モバイルとデスクトップに個別の CSS ビューポート幅を設定できます。
制限
ネイティブ端末、DPR、タッチ、ブラウザー UI、実ブラウザー間の完全な一致は再現しません。
よくある質問
あわせて知りたいこと
JavaScript は動きますか？
いいえ。script とインラインイベントを削除し、allow-scripts も使いません。
スマートフォンをシミュレートしますか？
いいえ。CSS のビューポート幅だけを変更します。
コードはアップロードされますか？
ページはコードをアップロードせず、ブラウザー内でプレビューを組み立てます。ただし、HTMLやCSS内の外部URLはリソースを要求する場合があります。