ハマったので自分なりのメモ。
後々追記／編集していきます。
■3キャリアでの共通文字サイズ（大中小）の指定
<span style=”font-size:x-large”>大</span>
<span style=”font-size:medium”>中</span>
<span style=”font-size:xx-small”>小</span>
- AUの古い機種(PENCK)では、小サイズは x-smallでもいけたのに、最近のAUではダメだった。
- docomoのFOMA(N703i)ではx-smallでもxx-smallでもOKだった。
- ３段階以外の文字サイズは無いっぽい
■marqueeについて
- <div style=“display:-wap-marquee; -wap-marquee-loop: infinite;“>docomoは全角で32文字まで</div>
と書く。（無限ループ） - wap-marquee-loop: infinite; を書かないとauでループしない。1回で終わる。
- docomoで全角32文字以上はスクロールから消える。
- <div style=“display:-wap-marquee;”><marguee>全角で32文字まで</marguee></div>
とすれば、PCでもプレビューできるし古い機種でも対応できるけれども、auでは上記の問題で1回しかスクロールしない。
AUで表示されないので二重指定しない。 - テキストの真ん中揃え指定してる中で、margueeを使うと不具合。
<div style=“text-aling:center;>
<div style=“display:-wap-marquee; text-aling:left;>流れる文字</div>
</div>
とすると一部のSoftbankで、真ん中からスクロールされる現象に。display:-wap-marquee; を指定するdivに、左寄せを指定して回避。
<div style=“text-aling:center;>
<div style=“display:-wap-marquee; text-aling:left;>流れる文字</div>
</div>
■リンクのフォーカス時の背景色について
各キャリアとも<head>内に指定できる（docomoは唯一まともに書けるCSS）
<style type=”text/css”>
<![CDATA[
a:link{color:#006666;}
a:focus{color:#ffffff;}
a:visited{color:#ff00ff;}
]]>
</style>
docomoのせいで外部CSSでまとめて指定は無理。
各ページに個別に書く事。
□docomoの場合
リンクがフォーカスされた場合、背景色がa:linkの色、文字色がa:focusの指定色になる。
そのため、 a:linkとa:focusの色はなるべくコントラストがハッキリしてる方がいい。
例） 上記の設定だと、リンクの色がこれだったら、フォーカスされたらこんな感じ
□AUの場合
各リンク色が背景色、文字色は補色(反対の色)になる。
例）上記の設定で。
未訪問(a:link)のリンクの色がこれだったら、フォーカスされたらこんな感じ
訪問済(a:visited)のリンクの色がこれだったら、フォーカスされたらこんな感じ
各自の携帯で試してもらったURLのQRコードです。
携帯サイト コーディング&デザイン
モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。
PHP×携帯サイト デベロッパーズバイブル
