なんとなく使う機会があるかもとおもってちょっとメモ。
どっちも振り分けた結果,要素の順番が入れ替わるようなスクリプトになってます。
UAで振り分ける方法
とりあえず定番っぽい感じですが,ユーザーエージェントで振り分ける方法です。
1 2 3 4 5 6 |
var view_mode; if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { view_mode = "SMP"; }else { view_mode = "PC"; } |
chromeとかならインスペクタ(右クリックして要素を調査か,キーボードならOpt+Cmd+Iとか)を開いて右下の歯車を押して出てくる,
Override User Agent をクリックするとUAを偽装できますのでその状態でリロードすれば結果がわかるとおもいます。
画面横幅で振り分ける方法
今流行のレスポンシブで使われてるメディアクエリ的なやりかたです。
ウィンドウをうごかすたび横幅を取得して, 特定のサイズを越えたらこっちみたいな感じで振り分けてます。
分岐をいっぱいかけばいっぱい振り分けたりも出来ます。
更にメディアクエリ書いてもいいし,この振り分けJSで読み込むCSSも振り分けちゃってもいいかもしれませんね。
自分の知識じゃこのくらいが限界でした。もしかしたらもっとスマートな方法あるかも。
不具合を見つけたため一旦掲載を外しました。
普通にタブレットとかPCとかを振り分けるのにつかうだけなら問題ないんですが、このままだとPCでウィンドウサイズを変化させたぶんだけ関数を呼ぶので、
例えばウィンドウサイズを1000pxから800pxにさげたら、その後ろの関数を200回実行してしまいます。
冷静に考えてみれば、そうですよねーって感じなんですが、気づきませんでした…。
なにかうまい解決策ができたらまた掲載します。
コメントする