【JS】ブラウザバージョン別分岐がうまくいかない

質問

UAを使いバージョン別にブラウザを分岐させたいのですが、
『ｘｘ以上oo未満』がうまくいきません。

シンタックスはないのですが、
どのような式にしたらいいでしょうか。

script
http://the-design-world.com/test/jquery.viewmodechanger.js

該当部分
...
}else if(ua.indexOf("Firefox")>-1){
if(ua.indexOf("Firefox >= 3.5")>-1){
c = 3;
}else if((ua.indexOf("Firefox <= 3.6")>-1) && (ua.indexOf("Firefox > 4")>-1)){
c = opt.firefox36;
}else if(ua.indexOf("Firefox <= 4")>-1){
c = opt.firefox4upper;
}else {
c = 1;
}
...

どなたかご助力いただけますでしょうか。

回答No.4

nobuoka · ベストアンサー

> indexOf、match、search等々色々試してはみましたが、肝心の
> OperaMini/OperaMobileがどうにもならないというのが現状です。

Opera Mini / Opera Mobile 以外でできたのでしたら Opera Mini / Opera Mobile でも同じようにできると思うのですが、何か難しい点があるのでしょうか。。

http://dev.opera.com/articles/view/opera-mobile-10-developers-introduction/#uastring
http://dev.opera.com/articles/view/opera-mini-5-developers/#uastring

上記の Opera の web 開発者向けページに拠ると、

・Opera Mini 5 は [Opera Mini/{数字}] という文字列を検出することで、Opera Mini であることを確認し、{数字} の部分をバージョン番号だとみなせる
・Opera Mobile 10 は [Opera Mobi] という文字列を検出することで Opera Mobile であることを確認し、[Version/{数字}] という文字列の {数字} の部分をバージョン番号だとみなせる

ようです。 もっと古いバージョンはわかりませんが。。

回答No.3

nobuoka

質問のところに書かれている URL から Design World のサイトを拝見しました。 思想は大体わかりましたが、やはり JavaScript で UA を判定することは時代遅れだと思います。
HTML 要素の対応、非対応に関しては、「現在多く使われている (IE 以外の) ブラウザで対応していない要素は使わない」 「IE のみ対応していない場合は、IE の条件コメントを使用して IE だけ特別な記述を行う」 という方針を、CSS の対応、非対応に関しては 「対応していない CSS プロパティがあっても問題ないように CSS を書く」 「IE に関しては HTML 要素と同じように IE 専用の CSS ファイルを条件コメントで読み込ませる」 という方針を採るべきです。

まあそれはともかく、元々の質問に答えるとすれば、
「正規表現を使ってユーザーエージェントを表す文字列から、そのバージョンを表す部分文字列を抜き出し、数値に変換して、数値として比較する」
というのが最も簡単な方法だと思います。

お礼

結局そこにいきついてしまうわけですね。。。

大がかりな動的システムを作らずに、半動的なjavascriptである程度はできないかと取り掛かっては見たのですが、
やはり壁は多かったです。

indexOf、match、search等々色々試してはみましたが、肝心のOperaMini/OperaMobileがどうにもならないというのが現状です。

ご回答有難うございました

回答No.2

fujillin

代表的なUAの一覧があるので、そのあたりを参考にすれば分岐の方法がわかるのではないでしょうか。
http://www.openspc2.org/userAgent/
http://pst.co.jp/powersoft/html/index.php?f=5311

まぁ、偽装できたりもするので、必ずしもあてにはできないかと…

お礼

ご回答有難うございました

回答No.1

nobuoka

ブラウザのバージョンごとの分岐というのはなかなか難しく、できないことはないと思うのですが必ずしも全ての場合に正しく分岐できるわけではありません [1]。 ブラウザのバージョンごとの分岐を行う以外の方法を探した方が良いのではないでしょうか？

なぜブラウザのバージョンごとに分岐させたいのかわかりませんが、もし、ブラウザごとに存在したりしなかったりするメソッドがあるから、という理由なのでしたら、以下のように、そのメソッドが存在するかどうかを調べる方がより良い手法だといえます。

// 例えば、elem.addEventListener メソッドが HTMLElement に定義されているかどうかで分岐
// elem は HTMLElement オブジェクト
if( elem.addEventListener ) {
// elem.addEventListener は定義されている
} else {
// 定義されていない
}

もし他の理由でブラウザのバージョンごとの分岐を実現したいのでしたら的外れな意見で申し訳ないです。

[1] https://developer.mozilla.org/ja/DOM/window.navigator.userAgent

参考URL：

https://developer.mozilla.org/ja/DOM/window.navigator.userAgent

お礼

完全に全てではなくていいのですが、HTML・CSSの切り替えをするために、ある程度のものが欲しいのです。
また、ブラウザにより、一部HTMLElementは動いたり動かなかったり少しだけ動いたり。。。とまちまちなので、
上記サンプルでの分岐は期待できません。