携帯デザイン：docomo対応にあたって
公開したオラグーンを社内の方にも使ってもらってるのですが、docomoユーザへのデザインがひどいことになっているので、対応すべく色々試行錯誤したので、そのときのメモ。
PC開発気分で簡単に書いてたhtmlで通用するほどあまくなく、私の携帯（AU）でのみ表示テストを行っていたのですが、そんな状態で、docomo(i-mode シミュレータ)で見るとこんなことになってました。（htmlをローカルで見たため、画像は表示できていません）
ほんとうはこんな感じで表示して欲しい！
で、こっからのドコモ携帯用への修正点は以下、
レスポンスヘッダに Content-Type: application/xhtml+xml を付加
html内の各種ヘッダを変更
背景色指定を変更
文字サイズ指定を変更
center 指定を変更
レスポンスヘッダに Content-Type: application/xhtml+xml を付加
アクセスのあるphpに以下の記述を追加
header('Content-Type: application/xhtml+xml');
html内の各種ヘッダを変更
もともとのページヘッダはこんな感じでしたが、
<html>
<head>
<meta http-equiv="Content-type" content="text/html" >
<title>オラグーン</title>
</head>
このように変更
<?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" />
<title>オラグーン</title>
</head>
背景色指定を変更
これを、
<h1 style="background-color:#73ABFF;">ﾏｲﾍﾟｰｼﾞ</h1>
これに変えました。
<h1><div style="background-color:#73ABFF;">ﾏｲﾍﾟｰｼﾞ</div></h1>
文字サイズ指定を変更
これを、
<font size="1">aaa</font>
これに変えました。
<div style="font-size:xx-small">aaa</font>
center 指定を変更
これを、
<div align="center">aaa</div>
これに変えました。
<div style="text-align:center;">aaa</div>
結果
こうなりました。
とりあえず
i-modeシミュレータで試してうまくいったようですが、実機で見てみないとなんともですよね（汗
それにこれから、全ページこれをやっていかなけば・・・・
参考URL
3キャリア対応ケータイXHTMLのTIPS 8つ:アシアルブログ
Tags: [docomo](/tag/docomo) « [オラグーン公開](/263/oragoon) [画像未復旧: similar.png](http://blog.playispeace.com/img/similar.png) 関連ありそうなエントリー