css横竖屏
.mobile-landscape-container {
@media screen and (orientation: portrait) {
position: absolute;
width: 100vh;
height: 100vw;
top: 0;
left: 100vw;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
transform-origin: 0% 0%;
}
@media screen and (orientation: landscape) {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
}
为该页面使用该css即可，这样在手机上浏览会发现页面处于横屏效果，而且即使开启了自动转屏，转屏后依然保持着横屏效果。
注意使用这个样式后，内部的组件就不能使用vw和vh了，因为这两个属性被颠倒了，如果继续使用会导致页面结构错误
但是有一个问题，就是如果将pc端浏览器缩小到高比宽大的情况下，页面同样会切换，效果不太好。所以可以判断是否是手机，只在移动端设置该样式。
有两种方式可以实现：
- 通过vue的
:class来判断是否是手机，然后再添加该样式即可。 - 通过css的
max-device-width和max-device-height来判断。
css判断移动端
max-device-width和max-device-height与max-width和max-height，它们不受窗口大小的影响，就是设备屏幕的宽高，是固定值。而pc端分辨率起点是800x600，目前移动端的浏览器分辨率都不会超过这个值。
注意移动端的屏幕分辨率和浏览器分辨率是不一样的，浏览器分辨率要小很多，因为目前手机的像素密度都大于1
所以我们可以通过max-device-width和max-device-height来判断是否是手机端，比如：
/*定义竖屏 css*/
@media screen and (orientation:portrait) and (max-device-width:600px) and (max-device-height:800px) {
}
/*定义横屏 css*/
@media screen and (orientation:landscape) and (max-device-width:800px) and (max-device-height:600px) {
这样我们为上面的样式加上max-device-width和max-device-height就可以使它只在移动端生效，不影响pc端。
html5横屏
通过上面的方法实现强制横屏效果，但是注意手机其实还是竖屏的状态，这时候如果有输入交互，那么键盘还是竖屏的。。。所以这仅仅适用于没有键盘交互的页面，比如视频播放页面。
那么有没有什么办法可以让浏览器自己进入横屏状态（就像APP中那样），html5提供了一个API：
window.screen.orientation.lock("landscape-primary");
但是注意这个api必须在全屏状态下才有效，也就是说需要在document.documentElement.requestFullscreen();或screenfull.toggle()后执行lock函数。
同时因为全屏需要有用户交互，所以最佳的方式就是一个全屏按钮，点击的时候全屏再切换横屏即可。这样键盘也是横屏状态下的键盘了。
注意：
- requestFullscreen在iOS上无效（screenfull也一样），所以screen.orientation.lock在iOS上也没有效果
- 虽然requestFullscreen在微信内置浏览器中有效，但是screen.orientation.lock无效，也就是说能全屏但是无法横屏。