PCとスマホ表示を切り替えるChromeの操作を、両方向で整理する

同じ言葉で検索されているが、実際には別の作業が2つ混ざっている。パソコンでスマホ表示を見たい場合は、たいてい確認の作業になる。自分が作ったページの崩れ、メールの見え方、フォームの入力欄、取引先のサイトがスマホだけおかしい、といった話が多い。逆にスマホでPC版サイトを見たい場合は、閲覧の作業になる。スマホ用の画面に目的のボタンが出てこないので、フル版を呼び出したい。この2つは仕組みがまったく違い、片方の設定はもう片方の端末に存在しない。

切り替えという言葉に入っている2つの話

1つ目は模擬になる。パソコンのChromeに対して、画面の幅が390ピクセルであるかのようにページを描かせる。タッチ用のカーソルにして、スマホとして名乗らせる。機械側は何も変わらない。Chromeがそのふりをして、ページがそのふりに反応する。

2つ目は要求になる。スマホのChromeが、ノートパソコンに送るはずの版をサーバーに求める。端末は変わらないが、届くページのほうが変わり、そのページの並べ方が狭い画面に適用される。

模擬はデベロッパーツールの中にあり、パソコン版のChromeにしかない。要求は設定の中にあり、Android、iPhone、iPadのChromeにしかない。パソコンのメニューをいくら探してもスマホ表示の切り替えが見つからないのは、そこに無いからになる。この検索が2回行われがちなのは、たいていこの理由による。

MacのChromeでスマホ表示にする

Chromeのデベロッパーツールには、Googleがデバイスモードと呼んでいる一群の機能がある。たどり着くまではキー操作2回で済む。

デベロッパーツールを Command+Option+I で開く。続いて Command+Shift+M でデバイスツールバーを表示する。ページの領域が、上に操作バーの付いた可変の枠に変わる。

寸法の一覧は、最初はレスポンシブになっている。枠の取っ手を引いて大きさを変えてもよいし、幅と高さを数値で入れてもよい。よく使う幅はプリセットとして並んでいて、モバイル（S）が320px、モバイル（M）が375px、モバイル（L）が425px、タブレットが768px、ノートパソコンが1,024px、ノートパソコン（L）が1,440px、4Kが2,560pxになる。同じ一覧から具体的な機種を選ぶと、その機種の寸法が入る。

意識されにくいが効く設定が3つある。

• デバイスの種類。ページをモバイルとして描くかデスクトップとして描くか、カーソルの見た目、タッチのイベントを送るかクリックのイベントを送るかが、ここで決まる。選べるのはモバイル、モバイル（タッチなし）、デスクトップ、デスクトップ（タッチ）の4つになる。ツールバーに出ていない場合は、その他のオプションから追加できる。見た目は正しいのにタップに反応しないときは、不具合ではなくこの設定の食い違いであることが多い
• デバイスピクセル比。画面の物理的なピクセルとCSS上のピクセルの比率で、レスポンシブな画像のどれが実際に読み込まれるかを決める。これを設定せずに画像を確認すると、答えを間違える
• メディアクエリの表示。ページのスタイルシートに書かれた区切りの位置が、枠の上に帯として出る。max-widthが青、min-widthがオレンジになる。帯の区間をクリックすると、その範囲まで幅が飛ぶ。右クリックからは、該当する@mediaの記述をソースパネルで開ける。取っ手を引きながら崩れる瞬間を探すより、はるかに速い

デバイスツールバーの端にあるその他のオプションが、これらを追加する場所になる。ツールバーが素っ気なく見えるときは、たいていこの3つが出ていないだけになる。

見た目が変わっても中身が変わらないとき

見た目が狭くなったのに、届いているページがPC版のまま、ということがある。原因は3つに分かれる。

サーバー側でどの版を返すか決めているサイトがある。機種名を選んだ状態のデバイスモードはスマホとして名乗るので、この判定を見ているサイトは切り替わる。ただし画面の解像度も一緒に見ているサイト、スマホ用に別のドメインへ転送するサイト、以前の訪問時の選択をCookieに残しているサイトは切り替わらない。

Cookieが原因かどうかは、シークレットウィンドウを新しく開き、そこでデバイスモードを有効にしてからURLを開けば分かる。以前の記録が無い状態で判定されるので、これで切り替わるならCookieが理由になる。

3つ目は、そもそもPC版とスマホ版が分かれていない場合になる。1枚のレスポンシブなスタイルシートで作られたサイトには、送るべき別の版が存在しない。この場合、幅を広げれば広い画面用の並びになり、狭めれば狭い画面用の並びになる。切り替えているのは版ではなく幅だけ、ということになる。

模擬で再現されないもの

Chromeの公式ドキュメントは、この点をはっきり書いている。

デバイスモードは、モバイル デバイスでページがどのように表示されるか、どのように操作できるかの一次近似と考えることができます。デバイスモードでは、モバイル デバイスでコードを実際に実行することはありません。 出典: developer.chrome.com

同じページには、モバイルのCPUの構造がノートパソコンやデスクトップのCPUの構造と大きく違うため、DevToolsでは再現できない側面があると書かれている。枠の中では滑らかに動いていたページが、実機ではひっかかることがあるのはこのためになる。確実に確かめる必要があるときは、実機をつないでその上で動いているページを調べるリモートデバッグが案内されている。

デバイスモードの周りには、幅だけでは答えられない疑問を扱う操作も並んでいる。CPUの速度と回線速度をわざと落として様子を見る設定があり、回線だけを落としたいときはネットワークパネルからも変えられる。センサーのパネルでは位置情報の模擬と画面の向きの設定ができ、向きはデバイスツールバーの回転からも変えられる。フォームの確認を横向きでも行っておくと、固定した見出しと画面上のキーボードがぶつかる問題を早く見つけられる。

幅を合わせただけでは見つからない崩れ

デバイスモードで幅と機種を合わせても、実機でだけ出る崩れがいくつかある。よく報告されるのは3種類になる。

1つ目はフォントの置き換えになる。パソコン側に入っている書体が端末に無い場合、実機では別の書体で描かれる。字幅が変わるので、1行に収まっていた見出しが2行になる。枠の中では起きない。

2つ目は画面の高さの扱いになる。スマホのブラウザはスクロールに合わせてアドレスバーが出入りするため、画面いっぱいを前提にした要素の高さが動く。枠の高さは固定なので、この動きは模擬に出てこない。

3つ目は入力欄とキーボードの関係になる。実機では画面下からキーボードが出て、表示できる範囲が半分近くまで狭まる。固定した見出しや固定したボタンがあると、そこで入力欄が隠れる。デバイスツールバーの回転で横向きにしておくと、同じ衝突を早めに見つけられる。

いずれも幅の問題ではないので、幅を変えながら探しても見つからない。確認の順番としては、並びの崩れをデバイスモードで潰してから、この3つだけを実機で見る形にすると手戻りが少ない。

スマホのChromeでPC版サイトを表示する

こちらは開発者向けの道具ではなく設定になる。毎回操作しなくても、既定として決めておける。

Androidの場合は、Chromeを開き、アドレスバーの右のその他アイコンから設定を開く。詳細設定の中のサイトの設定、続いてPC版サイトを選ぶ。デフォルトの表示を選ぶと、画面の大きさと端末のRAMに応じてChromeが選ぶ。モバイルサイトを選ぶと常にスマホ版を要求する。PC版サイトを選ぶと常にPC版を要求する。同じ画面にはサイトごとの例外を足す欄があり、知っておく価値があるのはこちらになる。1つのサイトだけをPC版に固定して、他の閲覧はスマホ版のままにできる。

iPhoneとiPadの場合は、Chromeを開き、その他アイコンから設定、コンテンツの設定、デフォルトのサイトビューと進み、モバイルかパソコンを選んで完了を押す。

その場かぎりで切り替えたいだけなら、その他のメニューにあるPC版サイトを使う。これは今見ているサイトにだけ効く。

Androidを外部の画面につないで使う場合の挙動も、ヘルプに書かれている。大きな画面につなぐとパソコンのブラウザのような操作性になり、ツールバーとタブバーがモニターに合わせて広がる。既定では8 GB以上のRAMを積んだ端末でPC版が表示され、つないだすべてのディスプレイを合わせて20個以上のウィンドウを同時に扱えるとされている。

やりたいこと	端末	操作する場所
スマホの見た目を確認する	Mac	デベロッパーツールのデバイスツールバー
タッチの動きを確認する	Mac	デバイスの種類をモバイルにする
読み込まれる画像を確認する	Mac	デバイスピクセル比を追加して指定
一度だけPC版で読む	スマホ	その他メニューのPC版サイト
常にPC版で読む	スマホ	サイトの設定のPC版サイト
特定のサイトだけPC版	Android	PC版サイトのサイト例外

表示がすぐ元に戻ってしまうとき

原因はほぼ3つに収まる。

サイトごとの例外は、全体の既定より優先される。以前にモバイルで固定したサイトは、既定をPC版に変えた後もモバイルのままになる。同じ設定画面の例外の一覧から外す必要がある。

スマホ用の別ドメインに転送するサイトも戻りやすい。転送はPC版の希望が読まれる前に起きることがあるため、いったんPC版が表示されても、1回リンクを踏むとスマホ用のアドレスに戻される。1枚目だけPC版で、2枚目からスマホ版になるならこの型になる。

3つ目は、届け方ではなく並べ方の問題になる。レスポンシブなサイトには送るべきPC版が無いので、要求しても幅の扱いが変わるだけで、並びは狭い画面用のまま残る。この場合は拡大縮小で見るのが正しい対処であり、回避策ではない。

両方の表示を毎日見る人が詰まるところ

たまに確認するだけならキー2回で終わる。1日に何十回も見る仕事になると、別の問題が出てくる。検証用のサイトと本番のサイトを同時に開き、取引先の管理画面には仕事用のアドレスで、自分のアカウントには別のアドレスでログインし、その間もチャットには届く状態にしておきたい、という状況になる。

ここで効いてくるのは切り替えの手数ではなく、1つの窓と1つのログイン状態を何個の用事が取り合っているか、になる。デバイスモードはログイン状態を変えないので、管理者の見え方と利用者の見え方を同じ窓で同時に比べることはできない。シークレットウィンドウを使えば1回かぎりの比較はできるが、閉じると残らない。毎日繰り返す比較なら、アプリごとに独立したワークスペースを持つ道具のほうが手数が減る。窓を名前の付いた集まりとして切り替える考え方はワークスペースに、窓ごとにログイン状態が保たれる仕組みはできることに整理してある。

最初に決めておくこと

確認が目的なら、Command+Option+I と Command+Shift+M を手に覚えさせて、メディアクエリの表示を一度オンにしておく。区切りの位置を探す手間がほぼ消えるので、ここが最も効く。

閲覧が目的なら、既定を丸ごとPC版にするのではなく、サイトごとの例外に登録する。普段の閲覧はスマホ版のまま残るので、後から困りにくい。どのサービスを窓として分けられるかは使えるアプリに、費用の目安は料金に書いてある。