シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

HTMLスマホ専用サイトを割り当てする方法

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

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(){
    varua = navigator.userAgent.toUpperCase();
    varurl = document.location.pathname;
    varspDir = '/sp/';
    (ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1))?
        isSP() :
        isPC();
    functionisSP(){
        if(url.match(spDir)){
            returnfalse;
        }else{
            location.href = spDir;
        }
    }
    functionisPC(){
        if(!url.match(spDir)){
            returnfalse;
        }else{
            location.href = '/';
        }
    }
}());

次にサイトに以下のように入力する(index.htmlに貼り付けるだけ)

1
2
3
4
5
6
7
8
9
10
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>スマホ専用サイトに移動する方法</title>
<scripttype="text/javascript"src="userAgent.js"></script>
</head>
<body>
</body>
</html>

重要なのは

<script type="text/javascript" src="userAgent.js"></script>

という一文のみ!!!

最後に、index.htmlと同じ場所にspというフォルダを作る。

そして、spというフォルダの中にモバイル専用のサイトを作りindex.htmlで保存すればいいだけ

これで終わり。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする

スポンサーリンク