3

wordpress ブログに 2 つの異なるスタイルシートを用意しようとしています。これにより、Web 経由でページにアクセスするときに 1 つのスタイルシートが使用され、iOS アプリ経由でブログ コンテンツにアクセスするときにもう 1 つのスタイルシートが使用されます。現在、iOS アプリからの URL リクエストに ?app=true を追加しています。これは、ブログでこの文字列を検索して、別のスタイルシートをロードできるようにするためです。JSON API プラグインを使用して、iOS アプリがプログラムでブログ投稿をプルし、iOS アプリの Web ビューに表示できるようにします。

私の wordpress ブログでは、URL で ?app=true を検索する JavaScript を使用しています。そうであれば、別のスタイルシートをロードします。

<script language="javascript" type="text/javascript">
    var currentLocation = window.location.href; 
    if(currentLocation.indexOf('/?app=true') > -1) {        
        document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"appstyle.css\" />");
    }
</script>

http://blog.meetcody.comを見て、ページのソースを表示できます。タグの間にこのコード スニペットが表示されます。

私が抱えている問題は、上記のコードが appstyle.css スタイルシートを実際にロードしないことです。http://blog.meetcody.com/wp-content/themes/standard/appstyle.css?ver=3.4.2を見ると、背景を黒に設定してテストしていることがわかります。本文 {} タグ

body {
background: black;
}

一方、 http: //blog.meetcody.com/wp-content/themes/standard/style.css?ver=3.4.2 の style.css では、ボディの背景色は #F2F0EB です。本文 {} タグ内

body {
    background: #F2F0EB;
}

?app=true などの URL 変数を渡すにはどうすればよいですか?それが渡されたときに、別のスタイルシートを読み込みますか?

4

3 に答える 3

0

あなたの問題にアプローチする最善の方法は、レスポンシブ Web デザインの手法を採用することだと思います。これらにより、さまざまな解像度に適切に対処できます。

基本的なCSSは次のようになります...

@media screen and (min-width: 480px) {
    // CSS for iPhone
}

@media screen and (min-width: 768px) {
    // CSS for iPad
}

@media screen and (min-width: 900x) {
    // CSS for desktop
}

要点は、プラットフォームごとに異なるスタイルシートをロードする必要がないということです。あらゆる状況で機能するスタイルシートが 1 つあります。特に対象としていないプラットフォームでも機能します。

新しいボストン グローブ サイトを構築したチームは、私が RWD を知るきっかけとなりました。これが彼らがしたことの内訳です。

于 2012-12-22T22:39:40.263 に答える
0

あなたのサイトの Firebug コンソールでいくつか試してみました。したがって、実際に機能したのは次のコードでした。

<script type="text/javascript">
if(window.location.href.indexOf('/?app=true') > -1) {
    var fileref=document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", "http://blog.meetcody.com/wp-content/themes/standard/appstyle.css");
    document.getElementsByTagName("head")[0].appendChild(fileref);
}
</script>

(このコードは、外部 JavaScript または CSS ファイルを動的にロードするから改作されました)。

あなたは他のスタイルシートをロードしていて、それらのルールを上書きしていると思われるので、他のすべてのスタイルシートの後にこのスタイルシートをロードする必要があります。したがって、このコードをドキュメントの最後またはwindow.onloadイベントに配置してください。

于 2012-12-25T08:12:28.840 に答える