twitter widget の横幅が mobile safari でバグるのを js で直す

結論

window.twttr = {_e: [
  (t)=>{
    t.events.bind(
      'rendered',
      (e)=> e.target.style.width=`${e.target.parentElement.clientWidth}px`
    );
  }
]}

経緯

mobile safari が iframe の width 指定をうまく処理できないバグらしい。
回避するために、無意味なCSS指定を追加するといいらしいのだが、どうも私の手元ではうまくいかなかった。まったく同じコードなのにリロードするたびに結果が変わる (多分同時に貼ってる別のウィジェットとの順序とかの影響) ので強引に Javascript で直すことにした。

twitter widget は公式に完了イベントを補足できるように作られている。これを利用するにはまず既存の widgets.js 読み出しを以下のコードに書き換え、

  window.twttr = (function (d,s,id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
    js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
  }(document, "script", "twitter-wjs"));

さらに、以下のようにしてイベントハンドラを登録する。

twttr.ready(function (t) {
  t.events.bind("rendered", function (event) {
    event.target.style.width = "100px"
  });
});

というようなことが https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/javascript-api に書いてある。
ところでこの twttr.ready って何？と思うまでもなく、 twttr._e に配列をセットして関数を詰めておけばいいということは容易にわかる。どうせ1つしか関数登録しないし、ready関数いらんよな、ということで冒頭のコードになる。 widgets.js は script タグで普通に読み込めばOK.