たった一つは盛りました。（すみません）

結論

js側でコントロールする時は、

window.addEventListener('resize',callback);

を使いましょう。
（windowのサイズが変化するたびにcallbackで設定した関数を実行してくれます。）

背景

レスポンシブな動的なサイトを作成していて、ある要素の位置を取得し、その位置に合わせてjs側でモジュールのコントロールをしたい時がありました。
例えば、動画モジュールを表示/再生させたいとして、z-indexで上に重なるボタンが最下部にあった時に、そのボタンより上側に動画がスクロールされた瞬間、jsで発火させ再生したい場合などです。（要するに、人の目で目視できるようになった瞬間に再生したい場合）

基本的にはjs側で、cssのtopの値を

document.querySelector('.Banner').getBoundingClientRect().top

みたいな感じでとってきて、それをoffset値として再生をコントロールする方針になると思いますが、safariの場合はこのtopの値が、下に表示されるタブバーのせいでずれてしまいます。
（特に、window.innerHeight - top値 みたいな計算をやっていると、思ったような値が入りません。）

基本的な施策としてはCSS側で-webkit-fill-availableを使う方法が主張されるのですが、chromeでは安定しないなどの理由で、いろいろな側面から見てもjs側でやっておいた方が安定しています。

簡単にですが少し嵌っていたのでメモです。