Vue实现手机横屏效果的代码示例

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端分辨率起点是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无效，也就是说能全屏但是无法横屏。

到此这篇关于Vue实现手机横屏效果的代码示例的文章就介绍到这了,更多相关Vue手机横屏效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论