渡される URL 変数に基づいて別のスタイルシートをロードするには、javascript を使用する必要があります。
シナリオは次のとおりです: 1 つの CSS スタイルシートと、iOS アプリにロードされた Web ビューを介してアクセスされたときに同じページのスタイルを設定するために使用される別のスタイルシートでモバイル Web サイトを維持する必要があります。
www.blog.meetcody.com を見ると、メディア クエリとレスポンシブ ウェブデザインを既に使用していることがわかります。これが不十分な理由は、ネイティブ アプリとモバイル サファリのどちらでページが Web ビューを介して読み込まれているかをメディア クエリが検出できないためです。この 2 つのケースを別々に処理する必要があります。このブログはホストされた wordpress ブログであり、iOS アプリで JSON API を介してアクセスしています。
これを処理する方法は次のとおりです。Web ページが iOS アプリを介して読み込まれると、URL「/?app=true」の末尾に変数を追加します。私がやりたいのは、URL にこの文字列が含まれているかどうかを確認し、含まれている場合は別の Web ビューを使用することです。
私は以下のコードでこれをやろうとしています:
<script language="javascript" type="text/javascript">
if(window.location.href.indexOf('/?app=true') > -1) {
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"http://blog.meetcody.com/wp-content/themes/standard/appstyle.css\" />");
}
document.close();
</script>
私が抱えている問題は、?app=true が URL の一部である場合、上記のコードが実際には 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;
}
もちろん、背景色を変更するだけではありませんが、これは例として示しているだけです。
これを行うためのより良い方法はありますか、それとも私のコードに何か問題がありますか? おそらく、javascipt の href である appstyle.css への直接リンクを使用することはできませんか? 大変助かりました。そしてメリークリスマス！