<?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()で振り分けた方がよさそう。
対処2:htaccessが使えないサーバーの場合RewriteEngine On RewriteCond %{HTTP_USER_AGENT} ^.*DoCoMo*. RewriteCond %{LA-F:REQUEST_FILENAME} \.html RewriteRule .* - "[T=application/xhtml+xml]"
'."\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を中心にモバイルサイト構築ノウハウまとめ