まず「mobile.html」という名前で携帯用のウェブサイトを作ります。
#あまり関係ないですが携帯用ウェブサイトを作成する際のヒント・・・
htmlの<head>と</head>の間に
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
html {
display: table;
}
body {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
というタグを挿入すると画面中央に要素を表示できます。
また、<head>と</head>の間に<meta name="viewport" content="width=device-width">を挿入すると携帯の画面幅に合わせて横幅を調整できます（つまりユーザーが拡大縮小しなくて済む）。
以下のような感じ。
<HEAD>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
html {
display: table;
}
body {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
<title>Carrot search</title>
<meta name="viewport" content="width=device-width">
</HEAD>
携帯用のウェブサイトが用意できたら
.htaccessに次のコードをコピペしてください。
（PC用のindexは次のように定義します
directoryindex index.html）
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /mobile.html [R,L]
</IfModule>
するとアクセスしてきたユーザーのUser Agentが携帯（iPhone、Windows phoneもしくはAndroid）だった場合は携帯用のmobile.htmlを表示し、PCもしくはタブレットだった場合にはPC用のindex.htmlを表示します。