移动端横屏

  最近做了一个移动端的项目，其中需求是，用户登录成功后，要求页面内容是以横屏的样式来展示的。在这里简单的总结记录下实现的方式。

css 的方式

• 媒体查询 orientation

• 语法：orientation：portrait | landscape

    @media (orientation: portrait) {}
  

  或者

    @media (orientation: landscape) {}
  

  portrait：指定输出设备中的页面可见区域高度大于或等于宽度，即竖屏状态。
  landscape：除portrait值情况外，都是landscape。(viewport 处于横向，即宽度大于高度。)
  实例代码：

    @media (orientation: portrait) {
      .helper_main {
        transform-origin: 0 0;
        transform: rotateZ(90deg) translateY(-100%);
      }
    }
  

js 的方式

• 思路是：获取视图的宽高，通过比较宽和高的大小，改变元素的宽和高

    const ele_width = document.documentElement.clientWidth;
    const ele_height = document.documentElement.clientHeight;
    const max = ele_width > ele_height ? ele_width : ele_height;
    const min = ele_width > ele_height ? ele_height : ele_width;
    const app_ele = document.getElementById('mobile_live');
    app_ele.style.width = max + 'px';
    app_ele.style.height = min + 'px';
  

相关的事件

• orientationchange 事件，屏幕旋转触发的事件

    window.addEventListener("orientationchange", function() {})
  

  或者

    window.onorientationchange = function() {}
  

• window.orientation 获取屏幕旋转的角度

    if (window.orientation == 0 || window.orientation == 180){
      console.log('portrait');
    }
    if (window.orientation == 90 || window.orientation == -90){
      console.log('landscape');
    }
  

• screen.orientation.angle 获取屏幕旋转的角度

    window.onorientationchange = function () {
      console.log(
        'the orientation of the device is now ' + screen.orientation.angle
      );
    };