kdcsライブラリー

ネット上にあるレスポンシブ化の手順ではiPhoneでカレンダーを表示させた場合、
縦表示では「はみ出る」横にすると「カレンダーが伸び始める」
という訳で色々探した結果、iPhoneにも対応する手法が見つかったのでメモ

スマホのように横幅が狭い画面ではカレンダーの余計なタブ（印刷・週・月・予定リスト）を非表示にする
以下はPC用とモバイル用で切り替える記述
※googleカレンダーから取得するコード「width」の部分を100%に変更する
html

<div class="cal_wrapper">
<div class="googlecal googlecal-4x3">
<iframe class="pc_block" src="https://www.google.com/calendar/embed?height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=support%40seitai-rakuya.com&amp;color=%238C500B&amp;ctz=Asia%2FTokyo" style=" border-width:0 " width="100%" height="400" frameborder="0" scrolling="no"></iframe>
<iframe class="sp_block" src="https://www.google.com/calendar/embed?showPrint=0&amp;showTabs=0&amp;showTz=0&amp;showCalendars=0&amp;height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=support%40seitai-rakuya.com&amp;color=%238C500B&amp;ctz=Asia%2FTokyo" style=" border-width:0 " width="100%" height="400" frameborder="0" scrolling="no"></iframe>
</div><!--/.googlecal-->
</div><!--/.cal_wrapper-->

css

.cal_wrapper {
  max-width: 800px; /* 最大幅 */
  min-width: 300px; /* 最小幅 */
}
.googlecal {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
}
 .googlecal iframe,
.googlecal object,
.googlecal embed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border: 0;
}
.googlecal-4x3 {
  padding-bottom: 30em;
}

※iframe内のstyleからwidthとheightを外した場合の記述（こちらを採用）
html

<div class="cal_wrapper">
<div class="googlecal googlecal-4x3">
<iframe class="pc_block" src="https://www.google.com/calendar/embed?height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=support%40seitai-rakuya.com&amp;color=%238C500B&amp;ctz=Asia%2FTokyo" style=" border-width:0 " frameborder="0" scrolling="no"></iframe>
<iframe class="sp_block" src="https://www.google.com/calendar/embed?showPrint=0&amp;showTabs=0&amp;showTz=0&amp;showCalendars=0&amp;height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=support%40seitai-rakuya.com&amp;color=%238C500B&amp;ctz=Asia%2FTokyo" style=" border-width:0 " frameborder="0" scrolling="no"></iframe>
</div><!--/.googlecal-->
</div><!--/.cal_wrapper-->

css（css内.googlecal iframeにwidthとheightを追加する）

.cal_wrapper {
  max-width: 800px; /* 最大幅 */
  min-width: 300px; /* 最小幅 */
}
.googlecal {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
}
 .googlecal iframe,
.googlecal object,
.googlecal embed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 400px;
}
.googlecal-4x3 {
  padding-bottom: 30em;
}

スマホでカレンダーを表示し、予定をタップするとポップアップウインドウが現れるが、横幅が400pxに指定されているためスマホ縦画面で見た場合に横にはみ出てしまう。
カレンダーのデザインをカスタマイズできる「gcalendar-wrapper.php」を使うとcssで横幅をカスタマイズできる。

htmlのカレンダー埋め込みコードを書き換える
ダウンロードしたgcalendar-wrapper.phpのcss記述部分に以下を追加

div.bubble { max-width:100% !important; }

gcalendar-wrapper.phpをthemesフォルダ内にアップロード

「src=”https://calender.google.com/calendar/embed?」 の部分を
「アップロードした場所へのパス/gcalendar-wrapper.php?」 に書き換える

スクロールしてもグローバルナビを上部で固定する（jQuery使用）
pcで表示の場合のみ固定し、モバイル表示の時はslicknavを表示する

ページhtml
※ナビ固定分の縦幅の起点のため空のdivタグ#navFixedを入れる
モバイル表示の際は、このdivタグは非表示処理(display: none;)する

<div id="nav">
ナビ記述・・・
</div><!--/#nav-->

<div id="navFixed"></div>
<div id="main">
メインコンテンツ・・・
</div><!--/#main-->

css

#nav { text-align: center; background: #2f62c5; }
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

/* スマホ対応
---------------------------------------------*/
@media only screen and (max-width: 780px) {
#nav {
  display: none;
  }
div#navFixed { display: none; }
}

javascript

//ナビ スクロール固定 --------------------------------------
$(function() {
  var $win = $(window),
      $main = $('#navFixed'),
      $nav = $('#nav'),
      navHeight = $nav.outerHeight(),
      navPos = $nav.offset().top,
      fixedClass = 'is-fixed';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > navPos ) {
      $nav.addClass(fixedClass);
      $main.css('margin-top', navHeight);
    } else {
      $nav.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  });
});

レスポンシブデザインのブレークポイントはブラウザサイズによる判別を行う

端末解像度

ブラウザサイズ

メディアクエリ（モバイルファースト）

/*スマートフォン用のスタイル*/
@media screen and (min-width:480px) {
/*横幅480px以上のスマホ*/
}
@media screen and (min-width:768px) {
/*横幅768px以上のタブレット*/
}
@media screen and (min-width:1024px) {
/*横幅1024px以上のパソコン*/
}

※7インチタブレットなどは横画面（ランドスケープ）にした場合960pxになるものがある