はてなブログで、プラットフォームやブラウザごとにMathjaxの表示方法を変える

タイトルの通り。

僕のAndroid端末のChromeの環境だけなのかもしれないが、MathjaxのRendererがHTML-CSSでは表示がずれてしまい、数式と文章と覆い被さってしまう。だから、端末やブラウザごとにMathjaxのRendererを変更することにした。

まず、はてなブログの設定画面にいく。
「詳細設定」＞「headに要素を追加」に、以下のコードを入力する。

<script type="text/javascript">
     var ua = navigator.userAgent;  
     if( ua.indexOf("Android") > 0 )   
         var androidversion =      parseFloat(ua.slice(ua.indexOf("Android")+8));
</script>

<script type="text/x-mathjax-config">
MathJax.Hub.Register.StartupHook("End Jax",function () {
  var BROWSER = MathJax.Hub.Browser;
  var jax = "CommonHTML";
  if (BROWSER.isMSIE && BROWSER.hasMathPlayer) jax = "NativeMML";
  if (BROWSER.isMSIE && !BROWSER.versionAtLeast("9.0")) jax = "HTML-CSS";
  if (BROWSER.isSafari && !BROWSER.versionAtLeast("6.0")) jax = "HTML-CSS";
  if (androidversion < 3.0) jax = "HTML-CSS";
  if (androidversion >= 3.0) jax = "SVG";
  return MathJax.Hub.setRenderer(jax);
});
</script>

参考にさせていただいたサイトは以下の三つ。

(1)MathJax Output Formats — MathJax 2.7 documentation
(2)www.kaasan.info
(3)d.hatena.ne.jp

簡単に言えば、

最新のIEではnativeMML
古いIEやSafariではHTML-CSS
古いAndroidではHTML-CSS
普通のAndroidではSVG
それ以外ではCommonHTML

をそれぞれRendererとした。

また、よっぽど昔のブラウザーを使っているか、DSやPSPを使っている人のことは流石に考えていない。
しかし、ウェブフォントを無効にしている人は案外多いそう。（2012年の記事では有るが）
tech.nitoyon.com
これに関して、なんとかウェブフォント無効を検出できないかなあと検索してみたが、良いサイトは見当たらなかった。（もし検出の仕方をご存知の方がいらっしゃったら教えて下さい）

というわけで、若干妥協せざるを得なかったが、当面はこれで行こうと思う。
（もし数式の表示がおかしい場合は環境と共にその旨をご一報いただけるとありがたいです）

テスト数式：