起きたこと
作ったページをスマホの幅で確かめるために、--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 の幅で折り返し、横にはみ出さずに写りました。