人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

自宅ウェブデザイナーです。仕事でショッピングサイトを現在制作中で、XHTML 1.0 Transitionalで外部スタイルシートを適用させています。
変更前のサイト(他社制作)はテーブルレイアウトだったのですが、私が現在制作しているサイトはなるべくウェブ標準に準拠しているので、スタイルシートを外しても十分見れます。

そこで、このままで携帯サイトとしても活用したいと思い、携帯で表示させた場合にのみ、スタイルシートの適用を外す、という処理をしたいのですが、やり方がわかりません。

通常のスタイルシートを読み込むと、携帯ではとても見にくい表示になってしまいますが、、かといって携帯用に別のスタイルシートをつくるような時間がありません。

もちろんネットで検索してみましたが、これといった方法は見つかりませんでした。

中身が空の「handheld.css」を別に作り、media="handheld"で読み込んでみましたが、やはり携帯でも通常のスタイルシートを読み込んでしまいました。(通常のPC用のスタイルシートは「media="screen,print"」としています。)

よろしくお願いいたします。


●質問者: hirapi
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS pc print screen XHTML
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● あすか
●0ポイント ベストアンサー

一概に携帯電話といっても、DoCoMo、au、ソフトバンクによって対応は違いますし、機種によっても対応するCSSの規格が異なってきます。

また、DoCoMoなどでは media="handheld" は通用しません。

詳しい事情は「携帯サイトとPCサイトはここまで違う!」を参考にして下さい。


症療法的ですが、HTMLのheadタグの中で以下のようなJavaScriptソースを読み込ませるようにしてみてはいかがでしょうか。

if (navigator.userAgent.indexOf("MSIE") > -1 ||
navigator.userAgent.indexOf("Firefox") > -1 ||
navigator.userAgent.indexOf("Opera") > -1 ||
navigator.userAgent.indexOf("Safari") > -1 ||
navigator.userAgent.indexOf("Gecko") > -1) {
 document.write('<link rel="stylesheet" type="text/css" href="[PC用CSSファイル]"');
}
◎質問者からの返答

素早い回答ありがとうございました。それでいただいたソースを組み込んでみたのですが、私の携帯(softbank934SH)では、どうしてもスタイルシートを読み込んで表示してしまいます。

ちなみにJavaScriptはほとんどわからないですが、以下のようにして<head></head>内に記述すればいいんですよね?

<script type="text/javascript"><!--この間にいただいたコード//--></script>

これを<head>タグの末尾に記述しました。合っているでしょうか?


2 ● tama213
●70ポイント

ソフトバンクの携帯の一部では、携帯、PCの順に書くとすべてのCSSが読まれます

以下のような順番にすれば、携帯用だけ読まれます。

1.<link ? media="screen, projection" />…PC用

2.<link ? media="handheld, tty" />…携帯用

http://34567.jpn.org/study1/css/cssv.html

◎質問者からの返答

回答ありがとうございました。CSSの記述の順番というのも関係するんですね。勉強になります!

しかしお教えいただいた通りの記述に変えてみたのですが、私の携帯(softbank934SH)では、PC用のスタイルシートを読み込んでしまいました。

ソフトバンクの携帯だけの現象なんでしょうかね?

そのあたりをちょっとソフトバンクに聞いてみようかな?

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ