はじめに

私は、スマホで見たときに画像などのwidthが大きすぎたりして横スクロールできてしまうようなWebページがとても苦手です。
ただ、毎回毎回これをチェックするのもかったるいなと思ったため、半自動的に検査できるツールを作成しました。

width-checker

width-checkerは特定のページが指定したデバイスの表示幅よりも大きなwidthになっていないかを検査するためのツールです。

https://github.com/DuGlaser/width-checker

使い方はREADMEを見ていただけるとわかるのですが、検査したいページのURL、最大最小の表示幅、最大最小の中でどれくらい間隔でテストするのかなどを指定することができます。

width-checkerがやっていることとしては比較的単純で、Playwrightを使ってページを描写し、ページのwidthを検査しているという感じになります。
Playwrightを使っているため、複数の環境でテストをすることができるのですが、WebKitだけは何故か動かなかったので一旦非対応にしています。

あと、最大の欠点として若干誤判定があったりします。なのであくまでも目安として使うのがいいと思います。

おわりに

もうちょっといい方法があったり、そもそもこれを使えば一発解決だよみたいなものがあれば教えていただけると幸いです！

この記事はIPFactory Advent Calendar2021の12/19の記事です。
IPFactoryというサークルについてはこちらをご覧ください。
昨日はy0d3nによる壊れてしまった特別なFormでした。
明日はn01e0によるおもしろマルウェアの解析です。お楽しみに！