Yinde's Blog

Talk is cheap. Show me the code.

目录
移动端强制横屏方案
/  

移动端强制横屏方案

最近工作中要开发一个横屏应用,无论用户是否开启手机旋转功能,进行强制横屏。

 这里面也收获了一些经验,在这里和大家分享一下。

首先说明我的方案只适用于只有横屏模式+一屏宽高无滚动的情况。

 强制容器旋转

 要做到强制横屏,我们需要监测手机的旋转事件,如果用户当前是竖屏状态,我们需要让整个视口进行 90 度的旋转。

 只要做到自动旋转,我们开发过程就可以将整个屏幕视为横屏状态,不用理会旋转这个过程。

首先,我们需要创建一个最外层的容器,并  加上绝对定位

<div class="ten-case"></div>
<!-- css -->

.ten-case { position: absolute; }

随后,我们需要在页面加载完成后触发一个方法

// 页面加载完成后运行
changeOrientation()

// 以下是具体的内容

import $ from 'jquery'

function changeOrientation($print) {
  var evt = 'onorientationchange' in window ? 'orientationchange' : 'resize'

  const onChange = function() {
    setTimeout(function() {
      var width = document.documentElement.clientWidth
      var height = document.documentElement.clientHeight

      // 原理就是监测当前宽高相比 如果竖屏 需要进行宣传并重新left-top定位
      // 因为旋转是基于整个元素的中心位置来的 而不是左上角
      if (width > height) {
        $print.width(width)
        $print.height(height)
        $print.css('top', 0)
        $print.css('left', 0)
        $print.css('transform', 'none')
        $print.css('transform-origin', '50% 50%')
      } else {
        $print.width(height)
        $print.height(width)
        $print.css('top', (height - width) / 2)
        $print.css('left', 0 - (height - width) / 2)
        $print.css('transform', 'rotate(90deg)')
        $print.css('transform-origin', '50% 50%')
      }
    }, 300)
  }

  window.addEventListener(evt, onChange, false)
  onChange()
}

export default function() {
  changeOrientation($('.ten-case'))
}

一些布局问题

接下来你就可以按照横向的屏幕大小(大概是从 16:9 到 18:9),进行页面的开发了.

 这里如果你用的布局方案和我一样,使用vw/vh进行自适应布局,那么这里可能有一个隐藏的坑。

当竖屏宣传为横屏时,其实  这个两个单位会进行反转,也就是说本来 100vw 等于手机的宽度,而一但变为横屏后,会等于手机的高,所以你这里要动态去获取单位值。


getUnit() {
  if (window.orientation === 180 || window.orientation === 0) {
    return 'vw'
  }
  if (window.orientation === 90 || window.orientation === -90) {
    return 'vh'
  }
}

参考

移动端如何让页面强制横屏


标题:移动端强制横屏方案
作者:zhangzhengyi12
地址:https://blog.yinode.tech/articles/2019/01/25/1567739690533.html

评论