1.Device.js で端末判別 編

PC・タブレット・スマホ の判別に

 もうだいぶ前に見つけたscriptです。2013年頃でしょうか。
手っ取り早く「PC・タブレット・スマホ」の端末種を判別する方法を探していた時に見つけた Javascript のコードブロックです。
私の様なアマさんにとってはとても重宝なものでした。
最近ではあまり利用価値は無くなってきましたが、ふとした際に利用できる局面は有るかも知れません。
レスポンシブ自体もリキッドデザインが当たり前になりましたが、以前はずいぶん悩んだものでした。
使い方は各人のイマジネーションに委ねられますが、ここでは一例として、端末種別に別々のCSSを割り振ってゆく例を作っています。

Navi Open
Close Navi
ads by google
デモと概要
少し回りくどい方法で取り廻しています。(正直効率的では有りませんので、このまま使う事は・・)
先ず「 Device.js」を読み込みます。
すると  Device.js は取得した端末種別を HTML のヘッダーに「HTML Class」として生成します。
  desktop の場合の例 : <html class=" desktop portrait"><head>
次に 作成した Javascript の構文により 「window.document.documentElement」 を使い 「className」を取得します。
Device.js はリロードを繰り返すと空白文字が都度付加されてしまいますので、replace を使用して文字列から空白を除去し初期化しています。
例では取得された端末別にそれぞれのCSSファイルをHTMLのヘッダー部に追記しています。
書き込みと読み込みを複数回繰り返しますので、反応は実に遅いです。 実用的とは言い難いのであしからず。

Google Chrome のエミュレーション機能を使用して「iPhone12」で疑似表示してみた所です。
最初の図が抽出されたデータを基に表示化したもの。
次の図が chrome の「Elements」で表示されたHTML部の内容です。
html class=" ios iphone mobile portrait"  の様に「html class」に追記されているのが解ります。
これが「Device.js」の機能なのです。
この機能をどのように使うかが課題なんです。 
Javascript に精通された方なら、Device.js そのものに手を加えると言う方法も有るでしょう。
HTML
ご覧の環境では、object要素がサポートされていないようです。外部文書を別ウィンドウで開いてください
CSS
ご覧の環境では、object要素がサポートされていないようです。外部文書を別ウィンドウで開いてください
JS
ご覧の環境では、object要素がサポートされていないようです。外部文書を別ウィンドウで開いてください