JavaScriptの解像度に合わせてCSSファイルを変更する

ウェブサイトで見つけましたが、私にとってはうまくいかないようです。問題は、CSSが非常に速く変化したり変化したりしないことです。黒いフラッシュと空白のページが表示されます（http://gino.net16.net/inde.phpは明らかにfirefoxで見ることができます）。 JavaScriptスキルはないので、何が間違っているのか分かりません。JavaScriptの解像度に合わせてCSSファイルを変更する

メインファイル

<html> 
<head> 
     <title>my title</title> 
<SCRIPT LANGUAGE="JavaScript"> 


<!-- Begin 
function redirectCSS() { 

if ((screen.width == 640) && (screen.height == 480)) 
     {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 

else if ((screen.width == 800) && (screen.height == 600)) 
     {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 

else if ((screen.width == 1024) && (screen.height == 768)) 
     { document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 

else 
     {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 
} 
// End --> 
</script>  

</head> 
<body onLoad="redirectCSS()"> 

<h1>Use the appropriate stylesheet to display this content</h1> 

</body> 
</div> 
</html>

CSSスタイルファイル

@charset "utf-8"; 
/* CSS Document */ 

body { 
    background-color: #2a2725; 
    font-family: Arial, Helvetica, sans-serif; 
    text-shadow: 0px 0px 1px #2a2725; 
    color: #fff; 
} 
/* }}} END TableSorter */

出典

2011-01-29 Decker

jsfiddle：http://www.jsfiddle.net/vLy3p/で動作するようです。 – Eray

Googleには「CSSメディアクエリ」があります。これを行う簡単な方法があります。 – Pointy

あなたは、ページのロード後にdocument.writeを決してしないことがあります。私はそれをしなければならなかった場合、私は個人的にこれを行うだろう

<html> 
<head> 
     <title>my title</title> 
<SCRIPT LANGUAGE="JavaScript"> 


<!-- Begin 
function redirectCSS() { 

if ((screen.width == 640) && (screen.height == 480)) 
     {document.write("<link href='small.css' rel='stylesheet' type='text/css'>")} 

else if ((screen.width == 800) && (screen.height == 600)) 
     {document.write("<link href='medium.css' rel='stylesheet' type='text/css'>")} 

else if ((screen.width == 1024) && (screen.height == 768)) 
     { document.write("<link href='large.css' rel='stylesheet' type='text/css'>")} 

else 
     {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 
} 
redirectCSS() 
// End --> 
</script>  

</head> 
<body > 

<h1>Use the appropriate stylesheet to display this content</h1> 

</body> 
</div> 
</html>

あなたはこのような関数をインラインで呼び出す必要が（そして、あなたも別のcssファイルを持っている場合、それは役立ちます）：

<html> 
<head> 
     <title>my title</title> 
<link href='style.css' rel='stylesheet' type='text/css' /> 
<script type="text/javascript"><!-- Begin 
var css = ""; 
if (screen.width < 800) css='small.css'; 
else if (screen.width < 1024) css='medium.css'; 
else css='large.css'; 
document.write("<link href='"+css+"' rel='stylesheet' type='text/css' />"); 
// End --> 
</script>  

</head> 
<body > 

<h1>Use the appropriate stylesheet to display this content</h1> 

</body> 
</div> 
</html>

出典

2011-01-29 21:06:59 mplungjan

あなたがいますページの内容を上書きします。 document.writeの後にonloadはページ全体を上書きします。関数に入れるのではなく、ページがロードされている間にヘッダ内のJavaScriptを実行する必要があります。

1）にしたくないか、JavaScriptをサポートすることができないユーザーやブラウザのため、JavaScriptを使用しなくても、「一般的な」スタイルシートをincudeすることを忘れないでください：いくつかのより多くの発言が

<script type="text/javascript"> 
if ((screen.width == 640) && (screen.height == 480)) 
     {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 

else if ((screen.width == 800) && (screen.height == 600)) 
     {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 

else if ((screen.width == 1024) && (screen.height == 768)) 
     { document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 

else 
     {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")} 
} 
</script>

。

2）language="JavaScript"は古くなっています。代わりにtype="text/javascript"を使用してください。

3）それは）

4のJavaScript

を「コメントアウト」の画面サイズはビューポート（ブラウザウィンドウ）サイズとは何の関係もないことに注意してくださいする必要がありますありません。誰もブラウザウィンドウを最大化することはありません。

5）さらに重要なこと：JavaScriptをこれ以上使用する理由はありません。 IEをサポートすることが本当に必要な場合を除き、CSS3 Media Queriesを使用できます。例えば、この質問を参照してください：Fluid layouts with CSS

出典

2011-01-29 21:08:40 RoToRa

偉大な心は同じように思える...編集中の投稿... – mplungjan

point（2） - 実際には、 "type"属性も不要で、多くの司祭（例：Crockford）はちょうどエラーが発生する可能性があります（タイプミスによってスクリプトが実行不能になります）。実際のメリットはありません。 – Pointy

CSS Media Queriesを使用してみてください、彼らはあなたには、いくつかのケースでは、あなたが常にあなたのレイアウトに問題がありますが、それがうまく機能していること:)

出典

2011-01-29 22:57:39 levu

がわからないしたい正確に何をすべきか。 CSSの標準宣言：

link rel="stylesheet" type="text/css" href="css/style.css" 

link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css" 

link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" 
     href="css/medium.css" 

link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css"

ブラウザは、あなたがそれのサイズを変更してもビューを変更します。

出典

2012-08-09 14:51:54

JavaScriptの解像度に合わせてCSSファイルを変更する

答えて

関連する問題