トップ新規編集差分一覧ソース検索ヘルプ RSS ログイン

開発/html仕様

HTML,JavaScript,CSS等の仕様

いろいろ癖がある、HTMLやJavaScriptの仕様をまとめましょう

PC版Operaの[表示]→[スモールスクリーン表示]モードが、縦長モードにかなり近い。
フォントサイズ等の違いをのぞけばレイアウト法則はほぼ同じと思われる。デバッグはまずPCでやるのが吉。

HTML,JavaScript,CSS等の仕様

HTML

縦長モード時の特殊な挙動

連続した改行は無効になる
フレームは1つのページに合成されて表示される
スペーサー画像など、一部の画像は表示されなくなることがある
- (詳細不明。サイズで判定?)
- とりあえず25×50pxのpngは表示されず、30×50pxは表示された。このあたりに境目がある?
CSSでのposition:absoluteや幅・高さなどの絶対指定っぽいものは無視される傾向にある
リンク内の後に強制的に改行が入る場合がある(リンク内の文字によって変わる?)
文字の色指定が背景色と比べてあまり変化が無い場合、文字の色が指定と異なって表示されることがある
- (背景が#FFFFFF,文字が#EEEEEEなどのとき、文字が黒で表示された/詳細未確認)

ただし、上記のOperaサイトにあるようにhandheld用のCSSを用意してやると、縦長モードでもCSSが有効になる
(レンダリング規則が変わり、テーブル等も普通にレンダリングされるようになる。)

【例】
<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld">

ただし、frame内のページに関してはmedia=handheldのスタイルシートで上手くスタイル指定が効かないようだ(方法があるのかも?)

縦長モード向けCSS関連について。

本スレ8-54氏の引用

54 名前：こくないのだれか[sage] 投稿日：2006/09/14(木) 23:49:28 ID:EUTUjLlm0
handheld用のCSSが適用されていないと、
color,background-color,float以外のプロパティは効きません。
ただ、ブロック要素に対するfloatはまだ確認していません。
img要素に対するfloatは有効です。

handheld用のCSSが適用されていると、その他のプロパティも効くようになります。
特に重要だと思われる、display:none;も有効。

やばいのはpositionプロパティですね。
横スクロール出る可能性が非常に高いです。
使わない方が無難かと。

2画面モードで大きな画像を表示する際の注意

~~640×480以上のサイズ~~の画像は自動的に縮小(?)されるため、ドットがつぶれます。
正確には縦と横のサイズが768px以内かつ縦×横のサイズが307200px以内のようです。
それ以下に縮小して表示すれば、ドットのつぶれは起きないようです。

フォント

フォントサイズは2画面モードでxx-small(欧文のみ),x-small,small,mediumの4段階
縦長モードではフォントサイズ指定は無視され、同一のサイズ(small相当)になる
ただし<pre>タグの中だけは一回り小さい文字になる

サイズ	%	em	px
中	87.5以上	0.85以上	14以上
小	68.75以上	0.66以上	11以上
極小	56.25以上	0.54以上	9以上
超極小	56.25未満	0.54未満	9未満

small,mediumに関してはfont-weight:boldが有効(欧文のみ)

colorは2画面モード、縦長モード共に有効

table

~~縦長モード時は無視される。~~

完全に無視されるわけじゃなくて、横幅にあわせて詰め合わせるように適当に
崩されるというのが正しいみたい。はっきりした法則性はよくわからん。

だそうです。
詳しい法則が分かった方はご一報を～

とりあえず各行の先頭のカラムが数字だと、行は崩されないようだ。<ol>の代わりに使ってることを想定してるのかな。

表示領域

2画面モード
- 拡大画面:256×176px分表示される
- 縮小画面:拡大画面を3×3つ分並べた分が1画面に表示
  - サイズは固定で、DS用に小サイズ指定したHTMLでも、足りない領域が灰色表示されスクロール可能
縦長モード
- 上画面下画面ともに実表示領域240×176px
  - 下画面スクロールバーが9px
  - 上画面もスクロールバーと同じだけ白色の領域有り
  - bodyタグの強制パディングが左右合わせて7px(左3,右4px)
  - 上下パディングも3pxずつ有り
- <body 背景色=灰色><div 背景色=白色>本文……</div></body>
- の様にすると、縁取りしたような表示になる