Bootstrap 2.0 × Google MAP API

Bootstrap2系

max-width:100%;

 状態:-  閲覧数:2,064  投稿日: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%;を強制回避したけど、
やっぱその方法しかないのかね。
それだと、レスポンシブじゃなくなるんだけど…。

横幅に応じて非表示対応

 閲覧数:863 投稿日: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」では白アイコンを利用する方法



週間人気ページランキング / 5-23 → 5-29
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 10
2 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 9
2 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 9
3 RGB ⇔ Lab | 色変換(色) 8
4 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 7
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 7
5 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 4
5 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
5 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 4
5 16進数カラーコード / 2進数 4
5 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 4
6 Design 0 3
6 効果を打ち消すスタイルシート | CSS 3
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 3
6 HSV / HSB 3
6 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
6 「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される | CSSトラブル対応(CSS) 3
6 色モデルイメージ図 | 色変換(色) 3
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 3
7 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
2025/5/30 1:01 更新