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を中心にモバイルサイト構築ノウハウまとめ

23. 12月 2009 von memo-log
カテゴリ: プログラミング |

コメント

コメント投稿

Required fields are marked *