Edited at

読込むjavascriptファイルをユーザーエージェントによって振り分け切替える

More than 5 years have passed since last update.

※ほとんどメモレベルです。気にしないでください。

●ちゃんと動きます。

●もっとイイ表記があるかも知れません。

●変な所はご指摘頂けると嬉しいです。

●一応operaで分けちゃってます。(意味ない?)


ブラウザで分ける

PC、スマホ、タブレットを判別。

スマホの場合はbrowser,chrome,firefox,旧opera,iphoneで分ける。


そもそも何故、分けたのか。

●スマホで見た場合、表示差異がかなりあった。

●AQUOSフォンがそもそもの発端。

 AQUOSフォンだけ、なぜか全体的に小さく表示される。

 viewportで【 target-densitydpi=220 】を指定すると表示が統一された。

●その他の機種はそんなに問題はなかった。


やっかいになった…

こうした事で、androidのデフォルトブラウザとchrome、fox、またiphoneとの間で大きな差異が生まれてしまった。

●文字サイズがかなり違う。

●というかピクセルの大きさが全然変わる。

●もちろん画像の大きさも全然ちがった。

●とくにbackground-imageが最悪だった。


つまりCSSを分けたのでjsもちょっと差異が生まれた。

だから分ける事にした。

正直、正しい方法かどうかは分からない。

そんなに考える必要はなかったのかもしれない。

まぁ、でもイイ経験になったと思う。

var _UA = navigator.userAgent;

var s = document.createElement("script");
s.type = "text/javascript";
if (_UA.search('iPhone') > -1 || _UA.search('iPod') > -1) {
s.src = "./js/ensen-iphone.js";
}else if(_UA.search('Android') > -1){
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.search('opera') != -1) {
s.src = "./js/ensen-opera.js";
} else if (userAgent.search('msie') != -1) {
s.src = "./js/ensen-android.js";
} else if (userAgent.search('chrome') != -1) {
s.src = "./js/ensen-chrome.js";
} else if (userAgent.search('gecko') != -1) {
if (navigator.userAgent.search("Firefox") != -1) {
s.src = "./js/ensen-fox.js";
}else{
s.src = "./js/ensen-android.js";
}
} else {
s.src = "./js/ensen-opera.js";
}
}else if(_UA.search('iPad') > -1){
s.src = "./js/ensen-ipad.js";
}else{
s.src = "./js/ensen.js";
}
document.getElementsByTagName("head")[0].appendChild(s);


Androidのバージョンを考慮

Androidのバージョン2.3以前の場合、表示差異がある事例があったのでバージョンも振り分け。

●androidだった場合、2.1と2.2と2.3を振り分けています。

●さらに分岐も可能ですが必要なさそう。(この時点でそんなに…)

var _UA = navigator.userAgent;

s.type = "text/javascript";
var s = document.createElement("script");
if (_UA.search('iPhone') > -1 || _UA.search('iPod') > -1) {
s.src = "./js/stage1/stage1-iphone.js";
}else if(_UA.search('Android') > -1){
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.search('opera') != -1) {
s.src = "./js/stage1/stage1-opera.js";
} else if (userAgent.search('msie') != -1) {
s.src = "./js/stage1/stage1-android.js";
} else if (userAgent.search('chrome') != -1) {
s.src = "./js/stage1/stage1-chrome.js";
} else if (userAgent.search('gecko') != -1) {
if (navigator.userAgent.search("Firefox") != -1) {
s.src = "./js/stage1/stage1-fox.js";
}else{
//////////////////////////////Androidバージョン判定///////////////////////////////////
if( _UA.search(/Android 2.[123]/) != -1 ) {
s.src = "./js/stage1/stage1-android-23.js";
}else{
s.src = "./js/stage1/stage1-android.js";
}
//////////////////////////////Androidバージョン判定///////////////////////////////////
}
} else {
s.src = "./js/stage1/stage1-opera.js";
}
}else if(_UA.search('iPad') > -1){
s.src = "./js/stage1/stage1-ipad.js";
}else{
s.src = "";
}
document.getElementsByTagName("head")[0].appendChild(s);