CODE Polyglot / 備忘録

ヘッドレスの Chrome は --window-size=390 でも幅 500px で描く(スマホの幅を確かめられない)

ヘッドレスの Chrome は、--window-size に 500 未満の幅を渡しても、ページの幅を 500px にします。スマホの幅を撮るなら、幅 390px の iframe にページを入れて、その外側のページを撮ります。

起きたこと

作ったページをスマホの幅で確かめるために、--window-size=390,900 --screenshot で撮りました。画像は 390px 幅なのに、文字が右で切れていて、ページが横にはみ出しているように見えました。すでに公開しているほかのページも、同じように切れました。

再現の手順

ページの幅(innerWidth)を書き出すだけのページを、幅を変えて開きます。

$ cat index.html
<!doctype html><meta name=viewport content="width=device-width,initial-scale=1"><body><script>document.body.textContent="W="+innerWidth+" CW="+document.documentElement.clientWidth</script>
$ for w in 390 500 800; do chrome --headless=new --disable-gpu --window-size=$w,800 --dump-dom http://localhost:8766/ | grep -o "W=[0-9]* CW=[0-9]*"; done
W=500 CW=500
W=500 CW=500
W=800 CW=800

(chrome は Mac では /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)

原因

ヘッドレスの Chrome の窓には、幅の下限(500px)があります。390 を渡してもページは 500px で組み立てられ、撮った画像だけが 390px に切り取られます。そのため、正しく折り返すページでも右が切れて写ります。

直し方

幅 390px の iframe にページを入れた外側のページを作り、それを撮ります。iframe の中は 390px で組み立てられます。

<!doctype html><body style="margin:0"><iframe src="/search/?q=丸め" style="width:390px;height:860px;border:0"></iframe>
chrome --headless=new --disable-gpu --window-size=600,860 --virtual-time-budget=5000 --screenshot=out.png http://localhost:8765/frame.html

確かめたこと

上の再現の手順の出力のとおり、500 未満の幅は 500 になりました。iframe に入れた方法では、同じページが 390px の幅で折り返し、横にはみ出さずに写りました。