1 
var $ = jQuery.noConflict();
$(document).ready(function() {
if ((screen.width>=1024)) {
$('link[title=theme800]')[0].disabled=true;
$('link[title=theme]')[0].disabled=false;
}
if ((screen.width<1024)) {
$('link[title=theme]')[0].disabled=true;
$('link[title=theme800]')[0].disabled=false;
}
});

私のHTMLページ：

<link title = "theme" rel="stylesheet" type="text/css" media="all" href="theme.css" />
<link title = "theme800" rel="stylesheet" type="text/css" media="all" href="theme800.css" />

さて、私は自分のサイトをさまざまな画面サイズでテストしていました。何らかの理由で、「<1024」モードの場合、2 番目のスタイルシート (theme800) が IE と Chrome に読み込まれません。Firefox でも動作します。私はすべてにタイトルとすべてを与えました。繰り返しますが、Firefox では機能しますが、他のブラウザーでは機能しません。他のブラウザで動作させるにはどうすればよいですか? ヘルプ！

ありがとう。

4

2 に答える 2

0

状況に応じて css メディア クエリを使用する方がはるかに優れている可能性があります。

于 2013-01-06T01:29:33.113 に答える
0

CSS メディア クエリはまだ広くサポートされていないため、スタイルシートを動的にロードすることも検討できます。この例に基づいて、次を試すことができます。

<script type="text/javascript">
    function load_stylesheet(file_name) {
         // Create the stylesheet
        var css_file = document.createElement('link');
        css_file.setAttribute('rel', 'stylesheet');
        css_file.setAttribute('type', 'text/css');
        css_file.setAttribute('href', file_name);
         // Append the stylesheet to the document
        document.getElementsByTagName('head')[0].appendChild(css_file);
    }

    if (screen.width >= 1024) {
        load_stylesheet('theme.css');
    } else {
        load_stylesheet('theme800.css');
    }
</script>

これは意図的に jQuery で行われるわけではないことに注意してください。そのため、最初に jQuery が読み込まれるのを待たずに、できるだけ早くスタイルシートを読み込むことができます。そうしないと、ユーザーに顕著な遅延が発生し、その間、コンテンツはスタイリングなしでむき出しに表示される可能性があります。

于 2013-01-06T01:50:00.900 に答える