はてなブログを Windows Phone で表示した場合でもスマートフォン表示に切り替える JavaScript を書いた

4 年振りとなる Windows Phone 端末 MADOSMA の発売でかなり盛り上がっているようですが、Office 365 で有名なブログを MADOSMA で表示すると PC 版になってしまい、とても残念な気持ちになります。

とても厄介なのが、スマートフォン表示に切り替えるというボタンを押しても、無反応というところですね。このあたりの原因は既にブログに書きました。

本来ならはてなブログ側でスマートフォン表示になるように直してもらいたいのですが、おーみさんに突かれてしまったので、とりあえず対応するためのコードをこのブログに入れておきました。

スマフォ表示に切り替わらない pic.twitter.com/73DtWEcBTS

— OMI Takekazu (@takekazuomi) 2015年6月20日

書いたコードは単純で、User-Agent に Windows Phone と入っていれば、スマートフォン表示に必要なクッキーを作成してページをリロードするというものです。

<script>
    if (navigator.userAgent.indexOf("Windows Phone") !== -1) {
        var expire = new Date();
        expire.setTime( expire.getTime() + 1000 * 3600 * 24 );

        document.cookie = 'device=touch; path=/; expires=' + expire.toUTCString();

        location.reload(true);
    }
</script>

コピペでそのまま使えます。これを PC デザインのヘッダーにでも入れておくだけです。

変更を保存して、もう一度 Windows Phone からページを見るとスマートフォン表示に切り替わるはずです。

Internet Explorer 11 では WebKit ベンダープレフィックスな CSS プロパティにも対応しているので、User-Agent での切り替え部分だけをはてなさんに直してもらいたい気持ちでいっぱいです。

フィードバックも何回か送っているのですが、日本には Windows Phone が公式的には存在しなかったので、MADOSMA 発売された今がチャンスかなと思ってます。