- 締切済み
ブラウザ毎の$(window).widthの違い
標記の件でお尋ねさせて頂きます。 画面上に縦スクロールバーが表示されているという条件下ではありますが、 FirefoxとChromeとで$(window).width()の値を確認すると異なります。 たとえば画面幅が960pxでも、前者は924pxと表示され、後者は960pxと表示されます。 Javascriptなどで、たとえばPCサイズ時に動きをつけたい時に、 If ($(window).width() > 959 ){～} といった記述を書くかと思いますが、 このままですと、FirefoxとChromeとで動きが異なってしまうと思います。 こういう場合ってやはりFirefoxを判別して、それ用の場合分けなどを準備する必要が ありますでしょうか。 何かいい方法があればご教授頂けますと幸いです。 よろしくお願い致します。
- webama_fk
- お礼率91% (117/128)
- HTML
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- やぎ じじい（@yagijijii）
- ベストアンサー率56% (63/112)
本来は、参照URLのように、User Agent による振り分けを行うべきなんでしょうね。 →対応が大変ですけど ほかに回避方法としては、以下のようなことが考えられると思います。 ・大は小を兼ねる（またはその逆）で、許される程度の違いになるように作る。 ・サイト内に、ブラウザの違いによる見た目の違いがあることを表記しておく。 →私はこれでごまかしています ・本サイトは、○○または△△のブラウザで閲覧くださいと表記する。 →これはメジャーなサイトでも見ることがあります
関連するQ&A
- ブラウザによる「width」の違い
<html> <body style="background-color:#FFFFFF;color:#000000;font-weight:nomal;margin:0%;"> <div style="border:solid 2px #000000;margin:10% 0% 10%;"> <div style="margin:5% 10% 8%;"> <table border="1" style="width:100%;"> <tr><td bgcolor="#3399FF">A1セル</td></tr> </table> </div> </body> </html> 上のソースは抜粋です。 上のソースをIEで開くと、一画面から横にあふれてスクロールする様な表示になってしまいます。 しかし、全く同じソースをOperaで開くと、 (Operaが入っていないと思うので)<table>のwidthを100%から700pxくらい(人によって解像度で変わってきますが)にしてIEで表示したときのように、画面からあふれることはく、ちょうど真ん中にきれいに表が収まります。 ブラウザによって、widthの基準となる幅がブロックだったりウィンドウサイズだったりしているんだと思うのですが、どうすれば両方のブラウザで同じ表示をさせることができるのでしょうか… 絶対数値で固定してしまえば早いのですが、できれば相対数値で幅を整えたいので…
- ベストアンサー
- HTML
- レスｐンシブのＣＳＳについて
レスポンシブデザインのコーディングをしています。 CSS上で、スマホで参照した場合の表示として、以下のようにメディアクエリを書いています。 @media screen and (max-width: 640px) { ～ } Chromeで画面幅640pxまで縮めた場合、想定どおりの表示となるのですが、 Firefoxを640pxまで縮めても変化せず、625pxで初めてスマホ時の表示となりました。 縦スクロールバーが表示されているせいで、15px分の解釈の誤差が出てしまっている ようなのですが、ＣＳＳで回避する方法はありますでしょうか。 それともJavascriptなどでfirefoxを判別し、かつ画面幅をチェックして、専用のCSSを当て込む必要がありますでしょうか。
- 締切済み
- HTML
- window.openでのブラウザ毎のサイズ指定
お世話になります window.open("***.cgi","win","width=0px,height=0px") （***.cgiは計算処理などをしているだけなので表示はする必要はありません 処理が終わったらwindow.close()で閉じてます） これを実行すると IE6.0では左上に5cm角くらいのウィンドウが開いて(約2秒) Opera9.20では何も表示されない感じで Firefox2.0.0.3ではほぼフルサイズ(約2秒) のウィンドウになってしまいます 計算処理をするだけなので表示を見えなくするか最悪同じサイズのウィンドウにしたいのですがうまくいきません http://www.openspc2.org/reibun/javascript/sub_window/045/index.html こちらを試してみたのですがOpera,Firefoxでは同じサイズのウィンドウを開くのですがIE6.0では『Win,IE,6』というアラートが出てポップアップブロックされてしまいます ウィンドウ処理が自動生成になってしまうからだと思うのですがwindow.openでブラウザ毎のサイズ指定させることはできないのでしょうか？
- ベストアンサー
- JavaScript
- HTMLのwidthについて
パソコンの画面幅より大きいwidthを指定した場合でも ブラウザ下の横スクロールバーを表示して、スクロールできるようにしたいのですが できるのでしょうか？
- ベストアンサー
- HTML
- CSSのボックスのブラウザごとの解釈の違いについて
見出し（h3）と内容をそれぞれ罫線で囲んだものをCSSで作るため、以下のCSSを作りました。 IEでもFirefoxでも思ったように表示されました。 見出しと内容部分のwidthとborderとpaddingを足した数値を同じにしたので、IEで見出しと内容部分の幅が同じに表示されるのはいいのですが、Firefoxでも幅が同じにに表示されるのはなぜでしょうか？widthだけの幅は違うので、見出し(h3）の方が2px狭く表示されると思ったのですが・・・ そもそもの考え方が間違っているのでしょうか。 ご教授のほど宜しくお願い致します。 h3 { font-size: 13px; padding: 3px 3px 3px 5px; border-top: 1px solid #009933; border-right: 1px solid #009933; border-left: 5px solid #009933; margin: 0px; width: 286px; } p { font-size: 11px; border: 1px solid #009933; margin: 0px; padding: 5px; width: 288px; line-height:130%; }
- 締切済み
- HTML
- ブラウザ間でのdiv幅の違い
次のようなdivの入れ子を作ったのですが、 IEとFirefoxで大きさが違って表示されてしまいます。 FirefoxでもIEと同じ幅、同じ見ためで表示させるには 何をどのように指定してやれば良いでしょうか。 よろしくお願いします。 <html> <head> <style type="text/css"> <!-- .blue {width:200px; padding:10px; background-color:#0000ff;} .green {width:180px; padding:5px; background-color :#00ff00;} --> </style> </head> <body> <div class="blue"> <div class="green">ここが180px</div> </div> </body> </html>
- 締切済み
- HTML
- ブラウザのスクロールバーの長さを制御
ブラウザのスクロールバーの制御をしたいのですが、 いい方法が見つかりません。 たとえば、縦の長さ800pxある画像を表示させたときに 500pxまではブラウザのスクロールバーを非表示にさせ、 500px以下になったときにはじめてスクロールバーが表示される形を再現したいです。 この時、例えばブラウザウィンドウの縦幅を480pxにした場合は 差分の20px分のみのスクロールバーが出てきてほしいのですが、 単純にjavascriptで判別させてoverflowの切り替えをしてしまうと、 800px分のスクロールバーが出てしまうのです。 ちなみに画像は背景としてではなく、あくまでも画像として配置したいと思っています。 何かいい方法があればご教授ください
- 締切済み
- CSS
- 高速ブラウザについて
現在Google chrome12.0.742.112 Firefox5.0 IE9 を併用しています。 表示が1番速いのがGoogle chromeなのですが、Yahooメールがマウスでスクロール出来ない、Cocacolaパークのゲームでネーム打ち込みが出来ない不便さがあります。 Firefox も表示は速いのですが起動が遅くて重いのが難。 Operaを使ったら遅くてすぐ削除しましたし、IE９は早くなった感覚は得られませんでした。 あるサイトのサムネイルクリック～表示秒数を比較すると、 Googleが２秒。Firefoxが３.５秒。IEは４.５秒でした。 余談ですがGoogle と Firefoxはタブを40前後開いています。 Google並みに速く、パスワード保存が出来て、マウススクロールもスムーズなブラウザがあったら教えて下さい。
- ベストアンサー
- ブラウザ
- Javascriptで開いたWindowのスクロール
<SCRIPT language="JavaScript"><!-- function openWin2() { window.open("http://www.OOOO/hanbai.htm","通信販売法","width=636,height=250,menubar=no,location=no,left=10,top=30") } // --></SCRIPT> <SCRIPT language="JavaScript"><!-- function openWin1() { window.open("http://www.OOOO/souryou.htm","送料について","width=579,height=240,scrollbars=no,location=no,menubar=no,left=10,top=30") } // --></SCRIPT> 上記の文で、「送料について」はスクロールバーがなくて ＯＫなのですが、 「通信販売法」は、スクロールバーを出したいのですが、 上の文では、スクロールバーは出てきません。 （表示サイズで途切れてしまう） どう直せば、スクロールバーが出てきますでしょうか？？
- ベストアンサー
- JavaScript
- div要素の幅をWindow幅に合わせて変更したい
下記のような形でdiv要素の#main_frameの幅を$(window).width()の値に合わせて指定しているのですが、ブラウザのwindowサイズを操作した場合に表示が崩れてしまいます。 windowサイズの操作がなされた場合、#main_frameの幅も自動的に変わるようにしたのですが方法はありますでしょうか。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#main_frame').css('width', ($(window).width() - 110) + 'px'); }); </script>
- ベストアンサー
- JavaScript
お礼
yagijijii 様 ご回答ありがとうございます！ やはり厳密にやるためにはUA毎にしなければならないのですね。 参考URLのご紹介もありがとうございます。大変勉強になりました。