Bootstrap 2.0 × Google MAP API

Bootstrap ＞ 2系

max-width:100%;

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

横幅に応じて非表示対応

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



類似度ページランキング
順位 ページタイトル抜粋 ％
1 Bootstrap 2.0 × Google MAP API 67
2 Twitter Bootstrap 2.0 47
3 Bootstrap v2.3.1 43
4 Bootstrap 2.0 → 3.1.1 43
5 Material Design 2014 年 42
6 Twitter Bootstrap 1.4 39
7 「Bootstrap v2.3.1」不具合 39
8 Bootstrap 3 39
9 Bootstrap 4 39
10 Bookmarks clean up 38
11 MediBang Paint 36
12 spacer.gif 35
13 Group Tabs 35
14 History Disabler 35
15 Save As MHT 0.1.3 34
16 Font Awesome 4.7.0 33
17 「Invalid property value.」遭遇事例一覧 33
18 「Illustrator」は「SVG」 出力可能 33
19 Font Awesome v5.0.8 33
20 さよならBootstrap 33
2024/10/10 16:18 更新
週間人気ページランキング ／ 10-3 → 10-9
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 43
2 RGB ⇔ Lab | 色変換(色) 20
3 鉄道会社毎のカラーコード | カラーコード(色) 15
4 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 8
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 7
5 16進数カラーコード ／ 2進数 7
6 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 6
7 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 5
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
7 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 5
8 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 4
8 RGBの種類 ／ ビットカラー | RGB(色) 4
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
8 「bgcolor」「background-color」「background」の違い | CSS 4
8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 4
9 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 3
9 画像ライセンスは大きく3種類に分かれる。「All rights reserved」＋「クリエイティブ・コモンズ・ライセンス」＋「その他」 | 画像著作権(画像) 3
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
9 8ビットカラー ／ インデックスカラー ／ パレットカラー 3
9 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
2024/10/10 1:01 更新