Bootstrap 2.0 × Google MAP API

Bootstrap2系

max-width:100%;

 状態:-  閲覧数:2,022  投稿日:2012-01-19  更新日:2014-05-12
レスポンシブサイトとGoogleMap APIとの相性
・具体的には、max-width:100%;と書いてあると、
・「Google MAP API V2」地図が表示されない
・「Google MAP API V3」地図は表示されるが、ストリートビューは表示されない


経緯メモ
・既存サイトに、「Bootstrap2.0」エンジン組む込んだら、「Google MAP API V3」ストリートビューが表示されなくなった
・犯人は、「bootstrap.css」
・jsではなく、cssが影響している理由は、「max-width:100%;」の影響
・一つ一つcssを外していった結果、ようやく判明したよ

「Google MAP API V2」の時は、地図部分にクラスを割り当て、max-width:100%;を強制回避したけど、
やっぱその方法しかないのかね。
それだと、レスポンシブじゃなくなるんだけど…。

横幅に応じて非表示対応

 閲覧数:840 投稿日:2012-01-03 更新日:2014-05-12
横幅に応じて非表示対応
・メディアクエリcssで、display:none;するだけ

レスポンシブの画面サイズによる画像サイズ自動変更は、max-width:100%;によって行なわれる
・例えば、img{width:600px;!important;}とかしていると機能しない

max-width:100%;で困るのは、
・「Google MAP API V2」地図が表示されなくなる
・GoogleADsenseなど、直接imgタグを触れない場合

GoogleADsenseに関しては、上位タグに「max-width:100%;」でイケる


分からないのは、max-width:auto;(多分この指定は出来ない)とか、
width:auto;とかの違い。


画面サイズを変えてうまくいかないときは、
大体、block;inline;の指定がうまくいっていないため。

画面サイズに寄って切り替えればうまくいくが(media-queries.cssとかで)、結構、メンドくさい。

ちゃんとやろうと思えば思うほど、一杯記述しなければいけなくなる。


スマホメインの人には、専用サイトで切り分けた方がいいと思われ。



1/20
レスポンシブで、下記解像度による表示の違いに凝ってみたのだが、
1024×768
1280×1024
imgタグに「max-width:100%;」ってやっても、
その上位タグに「max-width:100%;」ってやっても、
「tdタグ」「trタグ」「tableタグ」「「tableタグの上位タグ」に「max-width:100%;」ってやっても、
tableがあると、レスポンシブにならないのね。

テーブルは、レスポンシブには鬼門と思われ。

しょうがないので、テーブル止めたら、普通にレスポンシブになった






「Bootstrap, from Twitter」を利用する際、「current page」では白アイコンを利用する方法



週間人気ページランキング / 4-9 → 4-15
順位 ページタイトル抜粋 アクセス数
1 「bgcolor」「background-color」「background」の違い | CSS 10
2 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 6
2 16進数カラーコード / 2進数 6
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 4
4 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 4
4 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 4
4 Design 0 4
5 効果を打ち消すスタイルシート | CSS 3
5 HLS / HSL / HSI / HSLA | HLS(色) 3
5 RGB ⇔ Lab | 色変換(色) 3
5 「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される | CSSトラブル対応(CSS) 3
5 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
5 鉄道会社毎のカラーコード | カラーコード(色) 3
6 フォーム(CSS) カテゴリー 2
6 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 2
6 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 2
6 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 2
6 RGB ⇔ XYZ / CIE RGB / sRGB(D65) / sRGB(C) / Adobe RGB / NTSC RGB 2
6 RGBの種類 / ビットカラー | RGB(色) 2
2025/4/16 1:01 更新