マンガでよめる痔のこと・薬のこと

携帯サイトを初めて作成したのですが、表示に以下の問題点があり、困っています。
ソースはPCサイト用のもの(HTML 4.1、タグ打ち)を流用、改変しています。

1.docomoの旧機種(2009年5月以前)で、文字サイズ、行間などのレイアウトが適用されない。

2.一部の携帯(機種不明)で、文章(文字のみで構成したファイル、最大35kb程度)が途中で途切れ、それ以上スクロールできなくなるらしい。

以下が、当該ページの冒頭<head>~<body>部分です。
自分の携帯電話SoftBank 942SHでは、表示には全く問題がありません。
(keitai.cssの内容は、body、div部分と同じstyle指定です。これではdocomo旧機種に対応できないと知ったので、タグ内のstyleを追加しましたが、効果がないようです。)
問題点を御教授していただければ嬉しいです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd.">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="keitai.css">

<title> </title>
</head>

<body link="#6666dd" vlink="#8899cc">
<div style="font-size:small ;background-color:#ffffff ; color:#333333 ; line-height:1.4em ; margin:3%">

このQ&Aに関連する最新のQ&A

A 回答 (1件)

サーバーがAppacheであれば.htaccessを利用してhtmlのcontent-typeをapplication/xhtml+xml .htmlにしてやります。



AddType application/xhtml+xml .html

これでとりあえずスタイルは適用できる状態になりますが、docomoの古い機種は行間の調整はかなり厳しいです。
というのも、line-heightは使えませんし、marginはimg要素にしか使えません。
ちょっと間違っているかもしれませんが、古い機種(多分iモードブラウザ1.0)で使えるプロパティと要素の一覧です。


background-image : body
background-color : body, div, table, td, th, tr
color : body, color, div, span
border-color : td, th, tr
font-size : body, color, div, span
text-align : div, hn, p, td, th, tr
margin-left : img
margin-right : img
margin-top : img
margin-bottom : img
width : td, th, tr
height : td, th, tr
vertical-align : img
float : img, hr
clear : blockquote, div, dl, form, hn, hr, ol, p, pre, ul
list-style-type : ol, ul, li
-wap-input-format : input, textarea
-wap-marquee-style : div, span
-wap-marquee-dir : div, span
-wap-marquee-loop : div, span


フォントサイズに関してもかなり厳しいと思います。私のやってた感じだと、3キャリア統一の時は毎回以下のようなタグを書いていました。今ではこれでは無理かもしれません。font要素のsize属性で大きさを調整します。style属性も毎回指定しなければ統一が取れなかったような・・・

<div style="font-size:small"><font size="1">テキスト</font></div>

正直、PCサイトのHTMLをドコモ携帯に読ませたい場合はCSSを完全に切る方が無難です。外部CSSで@media handheldでも使って携帯用のスタイルを書いておけば、その他のブラウザでそこそこ表示できる機種のみにスタイル指定を絞ることができます。


2.はキャッシュオーバーじゃないでしょうか。
http://ke-tai.org/moblist/
    • good
    • 0
この回答へのお礼

早速のご回答、ありがとうございます。
docomoの公式HPでi-modo HTMLの使用可能タグをチェックしたのですが、御指摘のとおり、行間やmarginは無効となるようですね。
シミュレーターIIでも2009年5月以前モードだと、「styleは無効です」と表示されます。

書式についてはHTMLではこれ以上どうにもならないようなので、XHTMLで再編集して、もう一度試してみます。
それでも駄目だったら、docomoでの表示は諦めます……。

あと、2.の表示が途切れる件ですが、キャッシュオーバーはファイル容量を小さくすれば回避できると考えれば良いですか?
現時点では、(報告される人によって数値の多少の上下はあるのですが)、22Kb程度のファイルまでは特に問題なく閲覧できているようですから、これを目安にすれば良いのでしょうか。
よろしければ、追加で教えていただけると嬉しいです。

お礼日時:2010/12/22 18:15

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング