どんなサイトもスマホ画面でプレビュー
サイトのアドレスを入力し、スマートフォンを選びます。ページはその端末と同じ実画面サイズの枠と、モバイルブラウザのバーの中に表示されるため、レスポンシブなレイアウトも実機と同じように切り替わります。
ここにサイトが表示されます
拡張機能のほうがはるかに快適です
オンラインツールは手軽な確認用です。Chrome拡張機能は同じことをお使いのブラウザ内で、枠の制限なしに行います。どのサイトも開け、本物のモバイルUser Agentと端末の画面パラメータが使われます。
オンラインツールと拡張機能
同じプレビューをブラウザ内で動かすと何が変わるか。
| オンラインツール | 拡張機能 | |
|---|---|---|
| 埋め込みを禁止しているサイト | 表示せず、理由を説明 | 通常どおり開ける |
| モバイルUser Agent | デスクトップブラウザのもの。変わるのは幅だけ | 本物のモバイルUser Agent |
| ピクセル比とタッチ | 画面サイズのみ | サイズ、ピクセル比、タッチポイントをエミュレート |
| localhostと暗号化なしのhttp | 利用不可 | 利用可能 |
| ログインとCookie | 枠内では制限されることが多い | 通常のタブと同じように動作 |
| 2台表示とスクリーンショット | なし | 2台を並べて表示、ワンクリックでスクリーンショット |
ここでサイトの見え方が違う理由
- 枠はお使いのデスクトップブラウザで動作します。画面幅に合わせるレイアウトは実機と同じように動きますが、サーバー側でモバイル版を選ぶサイトはデスクトップ版を表示することがあります。
- サイトによっては埋め込みを禁止しています。空の枠を表示するのではなく、検出して理由を説明します。
- ログイン、Cookieバナー、埋め込みウィジェットは、ブラウザが枠内のCookieやストレージを制限するため、動作が異なる場合があります。
- タッチ操作や実機の処理性能はありません。重要な操作は実機で確認してください。
- localhost、ログインが必要なページ、暗号化されていない http のページには Mobile View Extension が必要です。