css横竖屏

有时候一些页面希望在手机上可以实现横屏的效果，比如播放页面，这样我们创建如下的css

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端分辨率起点是800×600，目前移动端的浏览器分辨率都不会超过这个值。

注意移动端的屏幕分辨率和浏览器分辨率是不一样的，浏览器分辨率要小很多，因为目前手机的像素密度都大于1

所以我们可以通过max-device-width和max-device-height来判断是否是手机端，比如：

css
复制代码
/*定义竖屏 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：

csharp
复制代码
window.screen.orientation.lock("landscape-primary");

但是注意这个api必须在全屏状态下才有效，也就是说需要在document.documentElement.requestFullscreen();或screenfull.toggle()后执行lock函数。

同时因为全屏需要有用户交互，所以最佳的方式就是一个全屏按钮，点击的时候全屏再切换横屏即可。这样键盘也是横屏状态下的键盘了。

但是注意：

• requestFullscreen在iOS上无效（screenfull也一样），所以screen.orientation.lock在iOS上也没有效果
• 虽然requestFullscreen在微信内置浏览器中有效，但是screen.orientation.lock无效，也就是说能全屏但是无法横屏。

今天的文章Vue如何实现手机横屏效果 ｜ 青训营分享到此就结束了，感谢您的阅读。