やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

Chromeのバグ? デベロッパツールにあるスマホ・シミュレータが不正な画面サイズを返す

 JavaScriptdocument.body.clientWidthなどで画面サイズを取得すると、間違った値が返される。

Chromiumバージョン

92.0.4515.98(Official Build)Built on Raspbian , running on Raspbian 10 (32 ビット)

 古いので更新すれば解決するかもしれない。でも事情があって更新できないケースもよくあるから困る。

 2023-05-08時点ラズパイ4で以下のように更新しても、これ以上バージョンが変わらなかった。ググるWindowsなら115.0.5758.0だったのに……。メジャーバージョン値に23も差がある。バグってても何ら不思議のない状態に思える。助けて。

sudo apt update
sudo apt full-upgrade -y

再現手順

  1. デベロッパツールを表示する(Ctrl+Shift+I
  2. バイスツールを起動する(Ctrl+Shift+M
  3. バイスツールのコンボボックスから再現したいスマホの名前を選ぶ(Moto G4など)
  4. その横に画面サイズが表示される(360 x 640など)
  5. デベロッパツールのConsoleタブにある>の行でdocument.body.clientWidthを入力しEnterキー押下して実行する
  6. 964のように間違った値が出る(期待値は360

問題

 レスポンシブ対応コードがPCで書けない。JavaScriptResizeObserverを使って画面サイズが変化したとき、そのサイズに最適化したレイアウトで実装しようと思った。でも今回のバグのせいで、それができなかった。

 スマホの実機でテストせざるを得ない。シミュレータの存在意義がない。困る。