なにが起きた？

Chromeの開発者ツールの、デバイスのデフォルト一覧が変更されています。
レスポンスデザインのレイアウト確認をするときの対象を見直す必要が出てくるかも？

なんだこれは

ChromeのDevエディションでモバイルレイアウトの確認をしていたところ、Pixel・iPhoneなどを選ぶところが大幅に入れ替えられている！

なにこれ、めっちゃ変わっている…。

いつから？

[Chrome 94](https://developer.chrome.com/ja/blog/new-in-devtools-94/# いつから？

試しに使ってみる。

意図を想像してみる

iPadなどを外してもPCと同じで十分、iPhoneやPixelの古いバージョンが無くても最新バージョンで十分、などの理由で一覧が刷新されたと推察することができます。すると、それぞれ独特な製品が並んでいることに気が付きます。

2つ折り
縦長
画面付きAIスピーカー
各社フラッグシップスマートフォン
タブレット端末

user agent はどう？

device	user agent
iPhone SE	`Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1`
iPhone XR	`Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1`
iPhone 12 Pro	`Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1`
Pixel 5	`Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36`
Samsung Galaxy S8+	`Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36`
Samsung Galaxy S20 Ultra	`Mozilla/5.0 (Linux; Android 10; SM-G981B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Mobile Safari/537.36`
iPad Air	`Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/87.0.4280.77 Mobile/15E148 Safari/604.1`
iPad Mini	`Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/87.0.4280.77 Mobile/15E148 Safari/604.1`
Surface Pro 7	`Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/87.0.4280.77 Mobile/15E148 Safari/604.1`
Surface Duo	`Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4710.4 Mobile Safari/537.36`
Galaxy Fold	`Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4710.4 Mobile Safari/537.36`
Samsung Galaxy A51/71	`Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36`
Nest Hub	`Mozilla/5.0 (Linux; Android) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.109 Safari/537.36 CrKey/1.54.248666`
Nest Hub Max	`Mozilla/5.0 (X11; Linux aarch64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.188 Safari/537.36 CrKey/1.54.250320`

ブラウザのコンソールでconsole.log(navigator.userAgent);すると最新の user agent 文字列が分かります。

新しい時代なのか

いままで、レスポンシブと言えば、いろんな対応の仕方が登場してきた。

CSSのメディアクエリ

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

isMobile

import {isMobile} from 'react-device-detect';

横幅だけで判別していていいのか？
- 画質が向上すればpxで判別できなくなるかも
モバイルかどうかの判別だけでいいのか？
- モバイルでPCサイズも有り得る
- Portrait・Landscapeは？
- スマホにモバイルディスプレイを繋いだ場合は？

もはや単純な判別は難しいようだ。

はやこれくらいの粒度が必須かも

JS の useragent 判別用ライブラリ、isMobile/README.md を見てみると、ある程度の粒度の判別が出来る。

Apple devices

isMobile.apple.phone
isMobile.apple.ipod
isMobile.apple.tablet
isMobile.apple.universal
isMobile.apple.device

Android devices

isMobile.android.phone
isMobile.android.tablet
isMobile.android.device

特にCtoCやBtoCの開発においては、これくらいの粒度で最適化していくべきかもしれない。

他の言語はこちら

まとめ

単なる２分岐では足りなくなっている。スマホかPCかの２択の後、微調整する。そんなスタイリングでいい。もはや、そんな時代ではないかもしれない。持ち運ぶのか？画素数ではなく実際の横幅は？縦横比は？一般に普及しているデバイスの多様化がレスポンシブの意味を変え始めている。そう感じずにはいられない。

Excelsior!