「レスポンシブ」タグアーカイブ

Googleマップをスマホサイトに埋め込むとはみ出す時の対処法

レスポンシブのスマホサイトに Google map を埋め込むと、はみ出してしまう。

これをはみ出さないようにしたい。

共有から

iframeのタグをコピペする。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23796.650854092717!2d140.75646100404356!3d41.79423516221846!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f9ef46bcb8d5525%3A0xa9e4bd2d96c4d502!2z54m55Yil5Y-y6Leh5LqU56ic6YOt6Leh!5e0!3m2!1sja!2sjp!4v1460702096429" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

HTMLをちょこっとだけ改造

<div class="gmap"><iframe...上のコピペソース.../iframe></div>

という感じで、 div でくくってやる。

そして普通にページに貼り付ける。

ちなみに class名の gmap は何でもOK。

CSSに追記

.gmap {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}

.gmap iframe,
.gmap object,
.gmap embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

これだけで、勝手にレスポンシブに対応してくれる。

コピペソースに　

width="600" height="450"

　などの記述があるが、レスポンシブ時にはこれは無視されるのでそのままでOK。

CSS, facebook, スマホ・パソコン・Web関連

Facebookの「いいね」ボタンと、タイムラインをスマホサイトでレスポンシブにする。CSSでdata-widthの設定

2015/07/10 あすたまコメントする

Facebookのタイムラインを埋め込むと横幅が660px固定になる

スマホやタブレット向けの可変Webサイト、いわゆるレスポンシブデザインというものがあるが、Facebookのタイムラインが微妙にレスポンシブデザインに対応していない。

これはCSSでうまく対応できるので、紹介しておこう。

<div class=”fb-page” data-href=”https://www.facebook.com/あなたのFacebookページ” data-width=”660″ data-height=”800″ data-small-header=”false” data-adapt-container-width=”true” data-hide-cover=”false” data-show-facepile=”false” data-show-posts=”true”><div class=”fb-xfbml-parse-ignore”><blockquote cite=”https://www.facebook.com/あなたのFacebookページ”><a href=”https://www.facebook.com/あなたのFacebookページ”>Universal Strength</a></blockquote></div></div>

これがFacebook公式からコピペした状態だ。

見ても分かる通り、data-widthが660で固定になっているように見える。何やってねんザッカーバーグ。アホか。
と思った人も少なくなかろう。

実はFacebookは自動でスマホ向けに最適化される

実は、「data-width」は660と書いてはいても。実は自動である程度サイズを合わせてくれる。

↓↓↓↓スマホ表示↓↓↓↓

これでも使えなくはない。ただし、スマホで見ると、画面横幅いっぱいいっぱいにFacebookのタイムラインが広がり、スマホ画面のフリックでスクロールしてもタイムラインのスクロールになってしまう。

結果としてWebサイト自体のスクロールがやりにくくなるわけだ。
ザッカーバーグ。アホか。

「data-width: auto;」は無効化されるので、その対策

古いバージョンのFacebookタイムライン表示だと「data-width」を任意の値や、 data-width: auto;にすることで対応できたが、現行(2015年7月時点)のバージョンではこれは自動で無効化されてしまう。

これは、下記をスタイルシートにコピペでうまく対応できる。

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
max-width: 97% !important;
}
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
width: 97% !important;
height: 100px !important;
}

つまり、「画面の幅の97%までにしろ。」ということで、両端(または右端)に3%の隙間ができるので、ページをスクロールさせられる。

もちろん90%でも80%でもいい。

これをスマホサイトのみに適応させるには、下記のような、メディアアンカー内に記述するといい。

@media screen and (max-width:600px){
}

メディアアンカーを使わないなら、

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
max-width: 97% !important;
}
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
max-width: 97% !important; /*←最大値を制限に変更*/
height: 100px !important;
}

こちらをCSSにコピペの方がいいかもしれない。

関連記事：
facebookのタイムラインの div に display:none; のCSSを適用する方法を利用して、スマホでは非表示にすることも可能。

Ajax他, CSS, スマホ・パソコン・Web関連

レスポンシブのviewportをクリックで切り替える方法。viewportを動的に制御する

2015/05/25 あすたまコメントする

viewportをボタンのクリックで切り替える方法

レスポンシブデザインの簡単な説明は
レスポンシブ（スマホ用とPC用で自動的に変える方法）で実装するを参照の事。

レスポンシブデザインとは、簡単に言うとメディアの幅によって、CSSの挙動を制御すること。

今まではiPadだったらこのページ、iPhoneだったらこのページという風に、スマホサイト、タブレットサイト、PCサイトを別々に用意していた。
&nbsp

しかし、これではiPhoneでデカい画面のスマホが出てきたらどうするの？
小さいブラウザウィンドウで見ているPCはバカでかいPC用ページで表示、という問題には対応できない。

そこで、端末が何かにかかわらず、メディアの幅（ブラウザ・スマホ画面の幅）によって見え方を変えようというわけだ。

で、レスポンシブ（スマホ用とPC用で自動的に変える方法）で実装するの後半にも書いてある通り、メディアアンカーを使っていく。
でも、スマホでもPCサイトに切り替えたい！というニーズもある。

こういった場合には、レスポンシブサイトに対応した、PCサイト/スマホサイトの切り替えスイッチが欲しい。

レスポンシブに置いて、PC/スマホの切り替えとはつまり？

CSSの中に、「画面が600ピクセル以上の場合はこれ、600ピクセル以下の場合はこれ」と記述しているので、これを切り替えるためには、メディアの幅が変わったと思わせればいい。

用意するものは3つ。

jquery-1.5.min.js
switch.screen.js
jquery.cookie.js

こちらから右クリックで保存したり、ダウンロードすることもできるし、どこかから探してきてくれてもOK。
なお、jqueryは1.5以外でも結構動作する。

準備とアップロード

まず、switch.screen.jsの3行目

$(“head”).append(“<meta name=’viewport’ content=”
+($.cookie(“switchScreen”) == 1 ?
“‘width=951, initial-scale=1.0′” :
“‘width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0′”)
+” />”);
$(document).ready(function() {
$(“#btnPC, #btnSP”).click(function() {
$.cookie(“switchScreen”, $(this).attr(“id”) == “btnPC” ? 1 : 0);
location.reload();
return false;
});
});

“‘width=951, … の部分をメディアアンカーの幅に合わせる。

上記の例の場合、「メディア(スマホの画面)の幅を951pxとして考えてね」ということなので、仮に小さいスマホであっても、レスポンシブのPCサイトのスタイルシートが適用される。

そしてサーバーの適当な位置へアップロード。

下記、コード例では、jsフォルダへアップロードした場合の記述。

HTMLのソース

<head>…</head>の間に、下記コードをコピペ。

<head>
…
<script type=”text/javascript” src=”js/jquery-1.5.min.js”></script>
<script type=”text/javascript” src=”js/jquery.cookie.js”></script>
<script type=”text/javascript” src=”js/switch.screen.js”></script>
…
</head>

切り替えスイッチ（リンク）を設置したい場所に、下記コードをコピペ。

<p class=”switch”><a id=”btnPC” href=”#”>PCページへ</a><a id=”btnSP” href=”#”>スマホページへ</a></p>

以上。

使用例：

http://rakuichi-b.com/
パソコンのブラウザの画面幅を小さくしたり大きくしたりして確認できる。
なお、上記のサイト例では切り替えボタンはスマホでのみ有効となっている。

あすたまいず