Home > mobile > 【mobile site】3キャリア共通XHTMLでコーディングしてみた

【mobile site】3キャリア共通XHTMLでコーディングしてみた

2009-04-14 (火) 17:01
mobile
au | CSS | docomo | mobile | softbank | xhtml

20090414_mobile

簡単なモバイルサイトを、3キャリア共通のXHTMLファイルで作成した際、ドコモのCSSにハマりました。。。au、softbankはOKなのに、docomoだけCSSが一切効かないっていう・・・。

まずは、3キャリア共通XHTMLにするためにheadタグ内に記述した内容をメモしておこうと思います。

★ソースの一番最初★

<?xml version="1.0" encoding="Shift_JIS"?>

★DOCTYPE宣言★

<!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">

★MIMEタイプ★

※ドコモの仕様に合わせて普段は「content=”text/html;」としている部分を「content=”application/xhtml+xml;」とする

<meta http-equiv="content-type" content="application/xhtml+xml; charset=shift_jis" />
<meta http-equiv="content-style-type" content="text/css" />

★metaタグ★

※入れても入れなくてもいいもの。

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />

<meta name="keywords" content="キーワード" />
<meta name="description" content="説明" />

前半3行は、キャッシュを保存させたくないページに記述します。これについては3キャリア共通だそうです。

携帯電話のキャッシュは自動で解放されない。

あえてキャッシュを解放する人はあまりいない。

携帯ブラウザ上でページの更新をする方法がわかりにくい。

参考した記事：http://dspt.blog59.fc2.com/blog-entry-16.html

それで、何にはまったかって言うと。。。しっかり調べていなかったせいなんですが、ドコモがXHTMLモードになる条件が足りていなかったみたいなんです・・・。

サーバーが出力するHTTPヘッダーを「application/xhtml+xml」とする。

metaタグの「content」を「application/xhtml+xml」とする。

1 が満たされていなかった為、実機で確認した際、CSSが効かなかったようです。なので、.htaccessを用意しました。

AddType application/xhtml+xml .html

無事CSSが効いた！！

古い機種によってはエラーになってしまう可能性があること。

auやソフトバンクはMIMEタイプを「text/html」としてもXHTMLで動作すること。

「application/xhtml+xml」としなければならないのはドコモのFOMAだけであるということ。

ということもあり、絶対！っていう内容でもなかったりなんですね・・・。
なので、docomoのFOMAのみ「application/xhtml+xml」とする方法のほうがいいのかな！？古い機種を無視すればOKっぽいかなと思います。

というわけで、docomoのCSSには本当にハマってしまいましたが、もう同じことでハマることはないでしょう。
auとsoftbankは意外と素直なので、docomoのことを考えて作ってあげよう！と思いました。

今回参考にしたサイトや記事

Comments:1

neotag 09-05-02 (土) 13:13

仕事でモバイルサイトやったときに同じ理由でハマりました・・。
しかも構築中はFirefoxで見てたので他人の書いたソースがXML的に正しくなくて表示してくれないっていう・・・。

DocomoがもっとCSSの対応がまともならモバイルサイト構築も楽しいんですが以下略

Trackbacks:0

Trackback URL for this entry: http://a.chocolateboard.net/mobile/20090414/351/trackback
Listed below are links to weblogs that reference: 【mobile site】3キャリア共通XHTMLでコーディングしてみた from Backyard

Home > mobile > 【mobile site】3キャリア共通XHTMLでコーディングしてみた

Search

Tag Cloud

Feeds

Recommend

Twitter !!