Tweet
3キャリア携帯対応XHTMLのまとめ1
■ドキュメントタイプ / ヘッダ
<?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 name="description" content="description" />
<meta name="keywords" content="keywords1,keywords2" />
<meta name="robots" content="index,follow" />
<title>携帯3キャリア対応XHTML</title>
</head>
■3キャリア共通タグ例
・BODY
<body style="background-color:#DDEEFF">
・HR
<hr style="color:#FF0000;background:#FF0000;height:2px;border:0px solid #000000;margin:0.3em 0;" size="2"/>
・DIV ( 全体の文字サイズをコントロール )
<body>
<div style="font-size:small">
コンテンツ
</div>
</body>
・DIV ( 背景色指定 + 文字色指定 )
<div style="background-color: #FF9233;color:#FFFFFF">
コンテンツ
</div>
・H1 ( 見出し要素 )
<h1 style="line-height:1em;margin:0;font-size:small;">
<hr />
■画像
横幅は228pxが適当。（スクロールバーがあるので）
■トラブルシューティング
・i-modeで、XHTMLのCSSが反映されない。
原因：レスポンスヘッダが"text/html"ではなく"application/xhtml+xml"でないとXHTMLとして認識されない。
対処1：.htmlファイルでは"application/xhtml+xml"を返す用ウェブサーバーを設定する。
".htaccess"
AddType application/x-httpd-php html
php_value default_mimetype "application/xhtml+xml"
上記の方法だと、全てのブラウザで"application/xhtml+xml"を返してしまうため、PCブラウザ上では表示できない場合がある。下記のように.htaccessでDocomoだけ"application/xhtml+xml"にするか、PHPのheader()で振り分けた方がよさそう。
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} ^.*DoCoMo*.
RewriteCond %{LA-F:REQUEST_FILENAME} \.html
RewriteRule .* - "[T=application/xhtml+xml]"
対処2：htaccessが使えないサーバーの場合
'."\n"
?>
iモードシミュレータでlocalhostを表示させるとCSSが無効になる原因
docomoのXHTMLにはまった
・auのキャッシュがクリアされない。
原因：auのキャッシュはかなり残る（ブラウザの履歴消去や、電源オフ程度では消えない）
対策：auのみ以下のタグを記述するのが望ましい。
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
■参考サイト
3キャリア対応サイトを作る 携帯サイトを作ろう！ -ちょっと詳しいモバイルサイトの作り方-:
モバゲーのような携帯サイトを作るための12のTips（3キャリア対応のXHTMLで作る）
■.htaccess でキャリア振り分け
xhtmlを中心にモバイルサイト構築ノウハウまとめ