Bootstrap 2.0 × Google MAP API

Bootstrap2系

max-width:100%;

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

横幅に応じて非表示対応

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



週間人気ページランキング / 3-18 → 3-24
順位 ページタイトル抜粋 アクセス数
1 「その他」画像フィルタ実行例。パラメータ用途で使用しているだけで元画像との関連性を見た目上視認できない | 画像フィルタ(画像) 12
2 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 8
3 RGB ⇔ Lab | 色変換(色) 7
4 Design 0 5
5 CSS色指定 | 色 4
5 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 4
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 3
6 鉄道会社毎のカラーコード | カラーコード(色) 3
6 IE改行対策 | CSS 3
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 2
7 「属性」「プロパティ」「アトリビュート」の違い | CSS 2
7 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 2
7 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 2
7 「Yahoo!検索(リアルタイム)」最強 | Yahoo!検索(リアルタイム)(検索) 2
7 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2
7 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 2
8 FotoSketcher 3.40 | FotoSketcher(ソフトウェア) 1
8 RGBの種類 / ビットカラー | RGB(色) 1
8 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 1
8 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 1
2025/3/25 1:01 更新