(cache) 「はてなブログ」でHTML5のカスタムデータ属性を使ってパソコン、スマホからのアクセスかを見分ける方法

はてなブログでは自分のブログがパソコンからアクセスされたのかスマートフォンからアクセスされたのか簡単にわかる方法があります。

HTML5で利用可能になったカスタムデータ属性「data-*」を参照

自分のブログがパソコンからのアクセスかスマートフォンからのアクセスかを見分けるのには一般的には「CSS メディアクエリ」で切り分けるのが良いのでしょうが、書式が面倒だったりします。

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
  @media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: fuchsia;
    }
    .desc:after {
      content:" In fact, it's between 500px and 600px wide.";
    }
  }
</style>

はてなブログでは「パソコン」か「スマートフォン」の切り分けしかできませんがHTML5でカスタムデータ属性「data-*」に「data-device」という値が設定されておりそれを参照することで判断ができます。

カスタムデータ属性「data-device」を参照するスクリプト例

以下は実際のJavascript例です。

<script>
$(function(){
    if( document.querySelector("html").getAttribute("data-device") == "pc"){
        //PCの処理
    }else{
        //スマホの処理
    }
});
</script>