TOC
最近工作中要开发一个横屏应用，无论用户是否开启手机旋转功能，进行强制横屏。
这里面也收获了一些经验，在这里和大家分享一下。
首先说明我的方案只适用于只有横屏模式+一屏宽高无滚动的情况。
强制容器旋转
要做到强制横屏，我们需要监测手机的旋转事件，如果用户当前是竖屏状态，我们需要让整个视口进行 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'
}
}