jquery - 调整方向变化的完整日历

Question

我正在使用完整的日历，当我的设备 (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;
}

Answer 1

找到我的问题了!

我正在手动设置日历的大小

window.addEventListener("orientationchange", function() {
    //Resize container and calendar
    $("#calendarWrapper, #calendar").css({
      width: $(document).width() * 0.8
    }); 
    //Re render calendar so it keeps aspect ratio
    $("#calendar").fullCalendar("render");

    //Move container to center of page 
    $("#calendarWrapper").css({
      marginLeft: $("#calendar").width() / 2 * -1,
      marginTop:  $("#calendar").height() / 2 * -1
    });
}, false);