2010年4月15日木曜日

JavaScript 「Opera Mini」を判別してCSS切り替え

つい最近、iPhoneのAppStoreに、「Opera Mini」が登場しました。

開こうとするサイトを、一旦Operaのサーバを経由し、圧縮したデータを取得することで、
Safariよりも高速なブラウジングが出来るようです。

そもそも「Opera Mini」というのは、携帯端末でのOperaを指すようで、
今回リリースされたのは、そのiPhone版ということのようですね。

ただ、Safariではブラウザ判別の基準として、
ユーザエージェント内の「iPhone」という文字列をチェックしていましたが、
「Opera Mini」のそれには「iPhone」が含まれず、PC表示となるサイトがあるようです。
うちのほるめすメモ帳 - 暫定も例外でなく、
Safariと同様に見せるためには、「Opera Mini」の判別をする必要があります。


「Opera Mini」のユーザエージェントの内容。
その通り「Opera Mini」という文字列が含まれるので、それを利用します。

<script type="text/javascript">
 //モバイル端末の判定
 var agent = navigator.userAgent;
 document.write( "ユーザエージェント:" + agent + "<br>" );

 if( agent.search(/Opera Mini/) != -1 ){
   // iPhone
 }else{
  // PC
 }
</script>
この判定では、結局他の「Opera Mini」もiPhone側に属してしまうので、生ぬるい感じです。 僕は別に他のそれらがiPhoneとしてヒットしようが良いのですが、 もしそこまでこだわって制御するのであれば、結局IPチェックするしか無いのかなと思います。 うーん、まだSafariからOperaに乗り換える理由が生まれないかなぁ。 軽くなっている気はするけれど、ブックマーク移行できないし、 デフォルトでiPhone仕様のサイトをそのまま表示出来たら嬉しいね。