しばやん雑記

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

はてなブログが Windows Phone 8.1 をスマートフォンだとなかなか認めてくれない件について

Windows Phone 8.1 Update で Internet Explorer 11 の User-Agent が変わった影響で、Twitter などの表示が改善されたことを以前書きました。

User-Agent 的に WebKit っぽい何かと誤魔化す方法は良くないと思いますが、その作戦を使っても Windows Phone 8.1 Update の Internet Explorer 11 での表示が改善されないサービスがあります。

はい、はてなブログです。

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

見事なまでの PC 表示ですが、何故かスマートフォン用の表示に切り替えるボタンが出ています。しかし、ボタンを押してもスマートフォン表示に切り替わることはなく、PC 表示のままになります。

日本で発売されていないデバイスに対応するのはめんどくさいとは思いますが、Internet Explorer 11 の F12 開発者ツールを使うと Windows Phone のエミュレートが簡単に行えるようになっているので、実機を持っておく必要がありません。

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

ブラウザープロファイルを Windows Phone に変更するだけでエミュレート表示を行えます。

実際のところ、何故 Windows Phone だけがスマートフォン表示にならず、その割にスマートフォンへの切り替えボタンが表示されるのか気になったので調べました。するとクライアントサイドは Windows Phone を考慮した実装が行われていることがわかりました。

isWindowsPhone: navigator.userAgent.indexOf('Windows Phone') != -1,

Hatena.Diary.Browser.isTouch = Hatena.Diary.Browser.isIPhone || Hatena.Diary.Browser.isAndroidMobile || Hatena.Diary.Browser.isDSi || Hatena.Diary.Browser.is3DS || Hatena.Diary.Browser.isWindowsPhone;
Hatena.Diary.Browser.isSmartPhone = Hatena.Diary.Browser.isIPhone || Hatena.Diary.Browser.isAndroidMobile || Hatena.Diary.Browser.isWindowsPhone;

ありがとう!ありがとう!

しかし、クライアントサイドで「このブラウザは Windows Phone ですよ、タッチ対応ですよ」と認識していても、サーバーサイドが Windows Phone と認識出来ていないので齟齬が発生しているようです。

スマートフォンへの切り替えボタンは、クライアントがスマートフォンだと認識しているのに、PC 表示が行われた時に表示されるようです。そしてスマートフォンへの切り替えを行おうとするも、既にスマートフォン表示だと思っているので処理がスキップされているというのが真相のようでした。

document.cookie = 'device=touch; path=/';

なので、エミュレート表示中や実機で上のようなクッキーを叩き込むコードを実行すると、Windows Phone でもスマートフォンとして表示されるようになります。

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

あと少しだと思うので、何卒 Windows Phone でもスマートフォン表示が出来るようにお願いします。