HTMLでスマホ専用サイトを作る方法
PHPやJavaScriptや.htaccessなど様々な方法で、スマホ専用サイトサイトに移動するように
することができる。
ただ、自分がオンラインで調べた中で一番簡単だったのがjavascriptだった。
そもそもPHPや.htaccessだと何故か機能しなかったりする・・・・・・。
逆に、javascriptだと、ブラウザでjavaをオフにしていると機能しないんだけども・・・・
どれも難しい。笑
一応やり方だけ、
まずトップのindex.htmlがあるフォルダと同じフォルダにuserAgent.jsというファイルを作成し以下のソースを貼り保存する
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
( function (){ var ua = navigator.userAgent.toUpperCase(); var url = document.location.pathname; var spDir = '/sp/' ; (ua.indexOf( 'IPHONE' ) != -1 || (ua.indexOf( 'ANDROID' ) != -1 && ua.indexOf( 'MOBILE' ) != -1))? isSP() : isPC(); function isSP(){ if (url.match(spDir)){ return false ; } else { location.href = spDir; } } function isPC(){ if (!url.match(spDir)){ return false ; } else { location.href = '/' ; } } }()); |
次にサイトに以下のように入力する(index.htmlに貼り付けるだけ)
1
2
3
4
5
6
7
8
9
10
|
< head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >スマホ専用サイトに移動する方法</ title > < script type = "text/javascript" src = "userAgent.js" ></ script > </ head > < body > </ body > </ html > |
重要なのは
<
script
type
=
"text/javascript"
src
=
"userAgent.js"
></
script
>
という一文のみ!!!
最後に、index.htmlと同じ場所にspというフォルダを作る。
そして、spというフォルダの中にモバイル専用のサイトを作りindex.htmlで保存すればいいだけ
これで終わり。