携帯サイトについて

HTML/CSS 携帯

とある事情により、週末み携帯対応のCGIを組んでみた。

ちょっとつまづいたというか、注意点だけ挙げておく。

  1. 基本

    • 携帯向けのサイトはcssとcookieは使えないと考えておいてよい。
    • カラーリングなどをする場合はタグに直接style指定をする。
    • 表示させる文字コードはShift-JIS

  2. PCサイト構築になれてる人向けに

    3. 以下の3点ははまるポイントだから注意する

    • 利用できるタグはPC版と同じとは限らない。

    むしろ、使えるタグは制限される。

    • 利用できるタグだからといって、PC版と表示が同じとは限らない

    むしろ、独特の表示がされると考えてよい。例えばH1などは携帯では単なる< b>のように表示される

    • 表示が同じだからといって、操作性まで同じとは限らない

    むしろ、独特の操作(上下左右、0〜9のみで操作)することを念頭に置いて

  3. デザインについて

    4. 改行を多く入れること。
    PCのブラウザちがって、携帯のブラウザはcssのスタイルが

    margin:0;
padding: 0;
font-size: normal;
line-height: normal;
white-space: wrap;

    というのがimportant(強制)されてると考えて良い。



  4. HTMLのテンプレートはこれでOKっぽい。3キャリア同時対応を考えるとXHTMLになる

    5. <?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
   <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
   <meta http-equiv="pragma" content="no-cache" />
   <meta http-equiv="cache-control" content="no-cache" />
   <meta http-equiv="expires" content="0" />
   <meta name="description" content="" />
   <meta name="keywords" content="" />
   <meta name="robots" content="index,follow" />
   <title>タイトル</title>
</head>

<body>

ボディー

</body>
</html>