フルカレンダーを使用していますが、デバイス(iPad)の向きが変わったときにサイズを変更するのに問題があります。
コンテナのサイズは適切に変更されますが、カレンダーは適切ではありません。ヘルプ、アドバイス、ヒントをいただければ幸いです。ありがとう!
JavaScript
//When the orientation changes
window.addEventListener("orientationchange", function() {
//Resize the container first
$("#calendarWrapper").css({
width: $(document).width() * 0.8
});
//Resize the calendar
$("#calendar").fullCalendar("windowResize");
//$("#calendar").fullCalendar("render"); //Doesn't work either
//Position the container to be in the middle
$("#calendarWrapper").css({
marginLeft: $("#calendar").width() / 2 * -1,
marginTop: $("#calendar").height() / 2 * -1
});
}, false);
初期CSS
#calendarWrapper{
position:absolute;
visibility: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
top: 50%;
left: 50%;
margin-left: 0px;
margin-top: 0px;
padding: 10px;
border-radius: 10px;
border: 1px solid #afafaf;
background-color: #fff;
z-index: 1001;
opacity: 1;
}