移动端强制横屏

 css

@media screen and (orientation:portrait) {
  /*竖屏样式*/
  body {
    transform-origin: 0 0;
    transform: rotateZ(90deg) translateY(-100%);
  }
}

js

(function () {
  function resize() {
    var body = document.getElementsByTagName('body')[0];
    var html = document.getElementsByTagName('html')[0];
    var width = html.clientWidth;
    var height =  html.clientHeight;
    var max = width > height ? width : height;
    var min = width > height ? height : width;
    body.style.width = max + "px";
    body.style.height = min + "px";
  }
  resize();
  window.addEventListener("resize", resize)
})();

另外比如拖动时间的x，y会反，所以要做相应的处理

完整版方案将会在后续更新！！