- ベストアンサー
WindowsとMacで違うCSSを読み込ませたいです
WindowsとMacで違うCSSを適用したいです。たぶん、Java scriptを使うのでしょうけど、本を見ても、よくいるサイトに行っても解りませんでした。(T.T) 誰か、解る方、乗っているサイトのURLだけでもかまいません。教えてください。よろしくお願いします。
- nomura0910
- お礼率51% (30/58)
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
>それぞれ3箇所のhref=の部分をきちんと、場所を設定している以外、変えていないのですが まず、それぞれの機種の判定をしているｉｆの中で alert("mac"); とかで機種の判別ができているか確認して下さい。 これで判別ができていない場合、platformが予想する値になっていないと思われるので、 alert(navigator.platform); などして、たとえばMacなどで、どう表示されるのかを調べて下さい。 あるいは、navigator.userAgent、に変えてみるとか まず、機種判別ができていないと話になりません。 それが、ＯＫだったら document.getElementById("myStyle").href を設定した後読み出してみて、どうなっているか同様に表示してみて下さい。 ../css/mac.cssなどのファイルがちゃんと設定できているか、読めているかという問題になろうかと思います。 例えば、同じフォルダにコピーをして mac.cssの様に同じ階層として指定したら読み込めるのか あるいは、http://www.～.ne.jp/css/mac.cssのようにフルパスで指定したら読み込めるのかとか あるいは、こうした切り換えを実行しないで単体で、スタイルシートの設定をした場合にスタイルが反映されるのかとか調べてみて下さい。 ＞もしも原因が解りましたら、教えてください 書いているサンプルは、一応ウチの環境では動くのものですので、 ウチではそちらで動かない原因はわかりません。 使用しているＯＳやブラウザなどの環境と、実際に試してみられたソースなど挙げていただければわかる人もいるかもしれません。
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
<head>～</head>に 以下の様に書いて下さい。 ------------------------- <link id="myStyle" rel="stylesheet" type="text/css" href="defaultStyle.css" /> <script type="text/javascript"> <!-- if(navigator.platform.toUpperCase().indexOf("MAC")!=-1){ document.getElementById("myStyle").href="mac.css"; } else if(navigator.platform.toUpperCase().indexOf("WIN")!=-1){ document.getElementById("myStyle").href="win.css"; } //--> </script>
補足
こちらも試してみたのですが、やはりうまくいきませんでした。こちらは私の解釈では、 defaultStyle.cssとmac.cssとwin.cssの3種類を用意して、それぞれリンクさせるという事だと思うのですけど、上記と変えているところは、それぞれ3箇所のhref=の部分をきちんと、場所を設定している以外、変えていないのですが、ダメでした。もしも原因が解りましたら、教えてください。お願いします。
- Java-Java
- ベストアンサー率41% (14/34)
どちらかのCSSを先に書いて、JavaScriptで判定して別のCSSで上書くと簡単に出来ます。 下記は先にMac用CSSを書いて、ユーザーがWinだったらWin用のCSSで上書いています。 <link rel="stylesheet" href="mac.css" type="text/css"> <script src="script.js" type="text/JavaScript"></script> 「script.js」は下記です。 if (navigator.userAgent.indexOf('Win') != -1) { document.write('<link rel="stylesheet" href="win.css" type="text/css">'); document.close(); } こんな感じでどうでしょうか？
補足
私のJAVAに関する知識が少ないので申し訳ないのですが…うまくいかないのです。 まず、<head>の部分に <link href="../css/mac.css" rel="stylesheet" type="text/css"> で、Mac用のCSSを読み込ませています。 次に、同じく<head>の<script language="JavaScript"> と</script>の間に、 if (navigator.userAgent.indexOf('Win') != -1) { document.write('<link rel="stylesheet" href="../css/win.css" type="text/css">'); document.close(); } と表記しています。 もちろん、mac.cssと、win.cssの両方を用意して、別々の内容を書いていますが、どうも、この場合にWindowsが、win.cssを読み込んでいないみたいなのです。(T.T) 何が原因か、もし解りましたら教えてください。 よろしくお願いします。
補足
それでは、実際の表記を乗せたいと思います。 どうやらMacでは、default.cssを読み込んでいるらしく、 Windowsでは、何も、cssを読み込んでいないようです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <!-- TemplateBeginEditable name="doctitle" --> <title>タイトル</title> <!-- TemplateEndEditable --> <link id="myStyle" rel="stylesheet" type="text/css" href="../css/defaultStyle.css" /> <script language="JavaScript"> <!-- if(navigator.platform.toUpperCase().indexOf("MAC")!=-1){ document.getElementById("myStyle").href="../css/mac.css"; } else if(navigator.platform.toUpperCase().indexOf("WIN")!=-1){ document.getElementById("myStyle").href="../css/win.css"; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --> </head> ---ｄｅｆａｕｌｔ.cssの表記--- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 3px; background: url("../image01-top/lam-back.jpg") repeat-x; } body,td,th { font-family: "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Osaka; color: #666666; font-size: 14px; } ---mac.cssの表記--- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 3px; background: url("../image01-top/lam-back.jpg") repeat-x; background-position: 0px 100px; } body,td,th { font-family: "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Osaka; color: #666666; font-size: 14px; } ---win.cssの表記--- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 3px; background: url("../image01-top/lam-back.jpg") repeat-x; } body,td,th { font-family: "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Osaka; color: #666666; font-size: 14px; } 環境は、WindowsXP IEの6.0 Macは、OS10.3 IEの5.2です。 Macで、バックグラウンドに使用しいる画像が、2ピクセルほど下にずれてしまい、対処法として、 別々のCSSを当てようと考えました。 長くなってしまったので、時間を取らせてしまって申し訳ありません。 なにか、解りましたら、お願いします。 それでは、失礼します。