読者です 読者をやめる 読者になる 読者になる

しばやん雑記

ASP.NET とメイドさんが大好きなフリーランスのプログラマーのブログ

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

はてなブログ

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

f:id:shiba-yan:20150620155017p:plain

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

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

書いたコードは単純で、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 デザインのヘッダーにでも入れておくだけです。

f:id:shiba-yan:20150620154558p:plain

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

f:id:shiba-yan:20150620154707p:plain

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

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