在方向改变时调整日历大小

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);