ashiola
メンバー
2 years前の投稿 #
お世話になります。
Ktai Styleを使ってブログを携帯対応しています。
その時に、記事の一部をPC用と携帯用で差し替えたいと考えているのですが、
試している方法ではうまくいきません。
この方法はKtai Styleの制限になるのでしょうか。
具体的には、記事の一部を次のように記述してclassによって非表示にしたいと考えています。
<div class="pc"><img src="・・・" /></div>
<div class="mobile">あいうえお</div>
PCから呼び出された時には「class="mobile"」を「display:none」で非表示に、
携帯から呼び出された時には「class="pc"」を「display:none」で非表示にと考えていますが、
PCからはうまく非表示になりますが携帯からは両方とも表示されうまくいきません。
Ktai Styleの場合、別な方法を考えたほうがいいのでしょうか。
携帯サイトで使えるCSSハック1 「displayハック」<-は参考で。
そもそもdisplay:noneがドコモ携帯で対応していません。
ashiola
メンバー
2 years前の投稿 #
shokun0803 様
参考サイトありがとうございます。
ただ、DoCoMoでもi-CSS2から「display」は対応されたはずですので、
今後は今回のような考え方もできると思ったのでした。
どの環境(機種?)で検証されているのか判りませんが、普通にxhtmlファイルを作成してdisplay:noneが有効なのか確認されましたか?
DoCoMoでは厳密にheaderを指定しないとxhtmlモードになりません。ktai styleで最初から用意されているテーマでもデフォルトではxhtmlモードになっていません。ktai styleのマニュアルページはご覧になっていますか?
最新の機種のみを対象にしたページを作るよりもphpで表示したくないclass指定などをみて削除するなどの方が確実だと思います。
ashiola
メンバー
2 years前の投稿 #
shokun0803 様
こちらの設定など書かずに質問してしまい失礼いたしました。
Ktai Styleのテンプレートはすべて変更済です。
・テンプレート先頭へ次の行を追加
<?php ks_use_appl_xhtml(); ?>
表示検証環境
1ステップ:FirefoxのFireMobileSimulatorで初期表示確認
(世代別の機種設定取り込み済み)
2ステップ:i-mode HTML Simulator2最新版で表示確認
3ステップ:友人にURLを飛ばして実機での表示確認
このような設定でテストしております。
ご指摘にありましたxhtmlモードの記述がヒントになり自己解決できました。
Ktai Styleの/operators/i-mode.phpを確認しましたところ、固定的に「Locale/Ver.=ja/1.0」と出力していましたので、そこを「Locale/Ver.=ja/2.3」へ変更して無事display:noneが有効になりました。
これから、機種による「Locale/Ver.」切り替えハックを少し考えてみたいと思います。
ありがとうございました。