• ベストアンサー
  • すぐに回答を!

Macfirefox3とMacfirefox2以下でCSSを切り替えたい

MacのFirefox3は、Firefox2までとはデフォルトフォントサイズが 違うので、Firefox3とそれ以外のFirefoxで分けたいです。 今まで、CSSを以下のスクリプトでブラウザ別に分岐していました。 MacのFirefox3の分岐を増やしてみたのですが、それ以外のFirefoxのCSSに 分岐されてしまいます。 あまりJavascriptに明るくないので、 どうしてわかれてくれないものか困っています。 どうぞお知恵をお貸し下さい! ↓以下、かいてみたソースです。 var Win=(navigator.userAgent.indexOf("Win")!=-1); var Mac=(navigator.userAgent.indexOf("Mac")!=-1); var Explorer=(navigator.appName.indexOf("Explorer")!=-1); var Firefox=(navigator.userAgent.indexOf("Firefox") !=-1); var Netscape=(navigator.appName.indexOf("Netscape")!=-1); var opera=(navigator.userAgent.indexOf("Opera")!=-1); var safari=(navigator.userAgent.indexOf("Safari")!=-1); var Version=navigator.appVersion.charAt(0); if(safari){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Explorer && Version=="6"){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && Firefox){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && opera){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } /*増やしたところ*/ else if(Mac && Firefox && Version=="3"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); }/*増やしたところ終わり*/ else if(Mac && Firefox){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && opera){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/win_nn.css" type="text/css">'); } else if(Mac && Explorer && Version=="5"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Mac && Netscape && Version=="7"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else{ document.write('<LINK rel="stylesheet" href="/css/font.css" type="text/css">'); }

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数135
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.1
noname#137826
noname#137826

こんにちは。 直接的な答えと致しましては・・・ Firefoxのバージョンの区別は navigator.appVersion ではなく navigator.userAgent で行います。 navigator.userAgent.indexOf("rv:1.9")!=-1 // Firefox 3 で true navigator.userAgent.indexOf("rv:1.8.1")!=-1 // Firefox 2 で true で区別できます。 参考URLをご覧になるとおわかりになると思いますが、navigator.appVersion では区別がつきません。 間接的な答えと致しましては・・・ 全ての場合を過不足無く区別するコードを書くのはかなり大変です。prototype や jQuery といったライブラリを使用することを検討なさるのがよいかと思います。 # さらに間接的な答えと致しましては・・・ # おせっかいは承知なのですが、フォントサイズは変更して使われている方も多いのでは?(私もそうです) # ブラウザで分けたところで、どこまで実効性があるのでしょう・・・

参考URL:
http://www.openspc2.org/userAgent/

共感・感謝の気持ちを伝えよう!

質問者からのお礼

kaorineさん> ご回答ありがとうございました、 大変助かりました! ライブラリの利用も今後視野に入れたいと思います。 フォントサイズの変更についてですが、 私自信、ブラウザのフォントは自分で調整しています…。 しかしどうしても振り分けたい場合があったもので。 また、どうしてもWindowsとMacのフォントサイズ差が 気になってしまうのですよね…。;; どのブラウザもデフォルトフォントサイズを 一緒にしてくれると良いのですが! ご回答ありがとうございました。

関連するQ&A

  • CSSとMacの関係

    CSSの制御で、 外部CSS マック用に css/style_mac.css に body {font-size: 12pt;} td {font-size: 12pt;} ウイン用に css/style_win.cssに body {font-size: 10pt;} td  {font-size: 10pt;} と記述しています。 がプラウザで確認したところ、 windows IE5.0は制御されていますが、 Mac IE5.0で制御されません。 HTMLの呼び出しは、 <SCRIPT LANGUAGE="JavaScript"> <!-- if(navigator.appVersion.indexOf("Mac",0) != -1){ document.writeln('<link rel="stylesheet" type="text/css" href="css/style_mac.css">'); } else { document.writeln('<link rel="stylesheet" type="text/css" href="css/style_win.css">'); } //--> </SCRIPT> と記述しています。 そもそもjavaがわからないので どこを直せばMacでも制御されるのでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ブラウザによるCSSの切替スクリプト

    ブラウザによるCSSの切替スクリプトを作りましたが上手くいきません。 ====css.js====================================================== function browserCheck(){ //変数myBrowにユーザの環境を代入 myBrow = navigator.userAgent; //変数myBrowに文字列Operaが入っていた場合(Opera)の処理 if (myBrow.match(/Opera[\/\s](\d\.\d+)/))     document.write("<link rel="stylesheet" type="text/css" href="Opera.css" charset="Shift_JIS">"); //Operaの処理 //変数myBrowに文字列MSIEが入っていた場合(IE)の処理。 //Operaにも文字列MSIEが入っているため、Operaの処理の後に行います。 else if (myBrow.match(/MSIE (\d\.\d+)/))     document.write("<link rel="stylesheet" type="text/css" href="MSIE.css" charset="Shift_JIS">"); //MSIEの処理 //変数myBrowに文字列Firefoxが入っていた場合の処理。 else if (myBrow.match(/Firefox[\/\s](\d\.\d+)/))     document.write("<link rel="stylesheet" type="text/css" href="Firefox.css" charset="Shift_JIS">"); //Firefoxの処理 //変数myBrowに文字列Netscapeが入っていた場合の処理。 else if (myBrow.match(/Netscape[\/\s](\d\.\d+)/))     document.write("<link rel="stylesheet" type="text/css" href="Netscape.css" charset="Shift_JIS">"); //Netscapeの処理 //上記以外の処理 else myBrow = "unknown"; //それ以外のブラウザ     document.write("<link rel="stylesheet" type="text/css" href="unknown.css" charset="Shift_JIS">"); //それ以外のブラウザの処理 } ================================================================ <html> <head> <script language="JavaScript" src="css.js"></script> <Script language="JavaScript"><!-- browserCheck(); //--></Script> </head> </html> どこか間違っているでしょうか? ご回答、宜しくお願い致します。

  • cssの振り分けについて

    下記のjavascriptの内容でわからないのでおしえてください。 if(cssFile){ if (document.getElementById && !opera5 && !opera6 && !(mac && ie5) && !icab){ var head = document.getElementsByTagName('HEAD').item(0); var newLink = document.createElement('LINK'); newLink.rel = "stylesheet"; newLink.type = "text/css"; newLink.href = cssFile; head.appendChild(newLink); }else{ document.open(); document.write('<link rel="stylesheet" href="' + cssFile + '" type="text/css">'); document.close(); } } よろしくお願いします。

  • ブラウザの解像度横幅1280の時スタイルシートを記述したいのですが

    記述が間違ってると思われうまくいきません。 どなたか間違ってるところを指摘してくださいませ。。 初心者ですお願い致します。 <html> <head> <title>モニタサイズに合わせてウィンドウサイズを変更する</title> <script Language="JavaScript"><!-- w = screen.width; moveTo(0,0); if (w == 1280) { document.write ("<link rel=stylesheet href="'+ a.css +'" type="text/css">"); } else if () { document.write("<link rel=stylesheet href="'+ b.css +'" type="text/css">"); } // --></script> </head> <body> </body> </html> なおa.cssには、背景黒くしてます。

  • CSSをあとから読み込みたい。

    「CSS読み込み」クリックで、追加CSSを読み込みたいのですが、 以下のやり方でIE6以外ではできたのですがIE6で動きません。 どなたかアドバイスいただけると幸いです。 ▼JS=============================================================== function roadcss(){ if(navigator.userAgent.indexOf("MSIE") > -1){ document.createStyleSheet('/answer.css'); } else { var tag=document.createElement('link'); tag.setAttribute("type","text/css"); tag.setAttribute("rel","stylesheet"); tag.setAttribute("href","/answer.css");​ document.getElementsByTagName('head')[0].appendChild(tag); } } ▼HTML============================================================= <a href="javascript:void(0)" onClick="roadcss()">CSS読み込み</a>

  • IE用と、その他のCSSを条件分岐

    お世話になっています。 IE用と、その他のCSSを条件分岐させるために 以下の用にやったのですが その他のfirefoxなどもIE用(wholerulesie)のスタイルシートになってしまいます。 どこが悪いのでしょうか? <link rel="stylesheet" type="text/css" href="wholerules.css" /> <!–[if IE 8]> <link rel="stylesheet" type="text/css" href="wholerulesie.css" /> <![endif]–>

    • ベストアンサー
    • HTML
  • firefox だけ専用のCSSを表示させたいのですが、、、

    firefox 専用のCSSを表示させたいのですが、 stylelink.js として var var_css=''; if(checkB.Mac) { if(checkB.SAF) { var_css="SAF"; } else if(checkB.IE52) { var_css="MacIE52"; } else if(checkB.IE5 || checkB.IE51 || checkB.IE6) { var_css="MacIE5"; } else if(checkB.NN6 || checkB.NN7) { var_css="MacNN6"; } else { var_css="common"; } } else if(checkB.Win) { if(checkB.IE) { var_css="IEGEK"; } else if(checkB.Win) { if(checkB.gecko) { var_css="firefox"; } else { var_css="common"; } } document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"/css/"+var_css+".css\" title=\"fontproperty\">"); としましたが 外部 firefox.css が上手く反映しません。 どうすればよいのでしょうか? 御教授をお願いいたします。

  • CSSをブラウザ別に振り分ける方法

    JavaScript初心者で、ソースは本に載っていたものをそのまま使っているのですが、その本だと、MAC、WIN-IE、WIN-NSの3つの外部スタイルシートを読み込ませるスクリプトしか載っていないので、困っています。 MACでも、IE、NS両方とも振り分けたいんです。 今使っているソースは以下です。 このファイル自体は、フレームセットファイルでフレームを切った中のファイルなのですが、フレームセットファイルにも<script language="JavaScript">以降の記述は必要なのでしょうか? 必要な場合は、どのようにして記述したら良いか教えて下さい。 よろしくお願いします。 <HTML> <HEAD> <!--?--> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=EUC-JP"> <TITLE></TITLE> <script language="JavaScript"> <!-- mac=(navigator.appVersion.indexOf("Mac")!=-1)?true:false; ie=(navigator.appName.charAt(0) == "M")?true:false; ns=(navigator.appName.charAt(0) == "N")?true:false; if (mac) { fName = "mac.css"; } else { if (ie) { fName = "win_ie.css"; } else if (ns) { fName = "win_ns.css"; } } if (fName != null) { document.write("<LINK REL=STYLESHEET HREF='"+fName+"' TYPE='text/css'"); } //--> </script> </HEAD>

  • インラインフレーム内のcssを親フレームに適用する

    インラインフレーム(子ウィンドウ)に表示されているページ(同一ドメイン上のページです)で読み込まれているcssを、ページ読み込み時に親ウィンドウ側でも読み込みたいと思っています。 内容としては 親ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test1.css"> 子ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> となっているソースをページ呼び出し時に 親ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> 子ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> のように共通していないcssを子ウィンドウ側に合わせて変更したいのです。 子ウィンドウ内のページのソースは訳があって編集する事が出来ないので、親ウィンドウ側で子ウィンドウ内の <link rel="stylesheet" type="text/css" href="test2.css"> の href の値を読みこみ、親ウィンドウ側の href の値を置き換えるといった方法では無いかと思うのですが、具体的にどうすればよいのか分かりません。 どなたかご存知の方、ご教授ください。 よろしくお願いいたします。 また、ブラウザはIE6~8と、Firefoxを想定しています。

  • スマホとPCの表示をクリックで切り替える方法

    初心者でスマホ対応に困っております。 同一ページ(ワンソース)で対応できるようにしようと javascriptのuserAgent(※以下参照)でPC用とスマホ用の 表示CSSが切り替わるページを作成しています。 スマホサイトのフッターによくある「PC」へのリンクをクリックすると スマートフォンでもPC用のスタイルが適用されるようにしたいと思っております。 また、PC用CSSからスマホ用CSSへ戻るリンクも設置したいと思っております。 環境は「.htaccess」と「php」が利用できないサーバです。 できればウィンドウサイズで表示が切り替わるのではなく、 リンクをクリックするだけで PC用とスマホ用のCSSを切り替えたいと思っております。 色々と探してみたのですが、なかなか思うソースが見つからなかったので、 実現可能かどうかも踏まえてご教授いただけますと幸いです。 以下、こんな感じでCSSを切り替えております。 if (navigator.userAgent.indexOf('iPhone') != -1) { document.write('<meta name="viewport" content="width=device-width, maximum-scale=1.0" />'); document.write('<link rel="stylesheet" href="css/smp.css" media="only screen and (max-device-width: 480px)" />'); } else if (navigator.userAgent.indexOf('iPad') != -1) { document.write('<link rel="stylesheet" href="css/iPad.css" />'); } else if (navigator.userAgent.indexOf('Android') != -1) { document.write('<meta name="viewport" content="width=device-width, maximum-scale=1.0" />'); document.write('<link rel="stylesheet" href="css/smp.css" media="only screen and (max-device-width: 480px)" />'); }; どうぞよろしくお願い申し上げます。

    • 締切済み
    • CSS