CRX id
opghhjlekjjoonlhkakcolmfbalkocle
opghhjlekjjoonlhkakcolmfbalkocle
Description from extension meta
任意のページのモバイル ビューポート プレビューをワンクリックで実行できます。
Image from store
Description from store
現代のウェブユーザーはじっと座っていません。職場の27インチモニターから電車のポケットサイズの画面へと切り替え、すべてのサイトがそれぞれのニーズに合わせてカスタマイズされていることを期待しています。デザイナー、開発者、マーケター、そして日常的に利用するパワーユーザーでさえ、毎日「このページは実際のスマートフォンではどのように見えるだろうか？」という疑問が生じます。ChromeのDevToolsを使えば、メニュー、パネル、そしてデバイスフレームの山をくぐり抜けた後で、その疑問に答えることができます。「モバイルビューに切り替える」機能を使えば、その疑問はたった1回のクリックまたはショートカットで解消されます。
ツールバーアイコンをタップ（またはAlt + Mキーを押す）すると、現在のページが瞬時に端末サイズのビューポートに収まります。ソフトグレーの背景がページをブラウザウィンドウの他の部分から分離し、コンテンツが主役となり、モバイルビューがアクティブであることを視覚的に示します。画面の隅には、現在のデバイスプリセットを示す小さなバッジが表示されます（iPhone 14以降）。
この拡張機能には、最もリクエストの多い3つのブレークポイント（iPhone 14（390 × 844 px）、Pixel 7（412 × 915 px）、iPad mini（768 × 1024 px））が付属しています。各プリセットは、選択したデバイスの操作感を模倣するために、メタビューポートタグ、要素の幅、スクロール動作を調整します。
誰が利益を得るのか?
フロントエンド開発者は、DevTools を開かずに数秒でレイアウトの回帰を検出できます。これは、複数のブランチやステージング サーバーを管理する場合に最適です。
UI/UX デザイナーは、新しい Figma コンポジションをエンジニアリング部門に発送する前に、簡単な健全性チェックを実施できます。
品質保証チームは、キーボード ショートカットを自動テスト スイートにスクリプト化して、応答性の高いテストを高速化できます。
コンテンツ作成者とマーケティング担当者は、ニュースレター、ランディング ページ、ソーシャル埋め込みをプレビューして、小さな画面でも読みやすいことを確認します。
モバイル ユーザーから報告された問題を再現するカスタマー サポート エージェントは、物理デバイスやシミュレーターを必要としません。
レスポンシブ デザインの概念を探求する教育者と学生は、使いやすく、権限が安全なサンドボックスを利用できます。
リリースの数分前にチェックアウトフローを微調整する場合でも、意欲的な開発者でいっぱいの教室で指導する場合でも、この拡張機能は、ほとんど学習曲線なしでワークフローに組み込むことができます。