携帯デザイン：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</div>
center 指定を変更
これを、
<div align="center">aaa</div>
これに変えました。
<div style="text-align:center;">aaa</div>
結果
こうなりました。
とりあえず
i-modeシミュレータで試してうまくいったようですが、実機で見てみないとなんともですよね（汗
それにこれから、全ページこれをやっていかなけば・・・・
参考URL
- iモード対応HTMLタグ一覧：docomo公式サイト
- DoCoMoのCSSとXHTMLまとめ：村式開墾日記
- ドコモ端末でCSSを利用するには:ke-tai.org
- 3キャリア対応ケータイXHTMLのTIPS 8つ:アシアルブログ
|
タグ: docomo
うーん。
俺のドコモでは、あんな風には見えんですなぁ。
あー、ローカルで試してるんで、今のオラグーンはまだ未対応ですｗ
もう少々お待ちを。。。