前端 H5 横屏 独特处理方案详解

随着公司知识付费业务的发展，产品发现横屏展示内容的效果和体验都要比竖屏要来的好。我也感觉确实是这样的～。刚接到这个需求的时候，稍微想了一下，横屏这还不简单直接把整个页面旋转90度，不就完事了？结果真正开发的过程中发现并没有这么简单。比如屏幕横过来手势滑动的方向没有变过来等等！于是尝试去百度了一下最终并没有搜到满意的答案。后来决定自己摸索一下，下面是我开发过程中总结了一套做法，有更好的做好的同学也可以分享指正。

效果图

首先给大家看看效果图

效果图一:

效果图二:

效果图三:

看上去还是挺高大上的吧～，不过这效果图是针对app原生设计的，实际H5页面在微信里面访问还会有标题栏和底部返回栏，如下图h5实际展示效果（android）：

大家可以进去先体验一下（用微信访问），项目地址 m.ngmm365.com/mathbox/ind… 页面加载完毕之后，点击试学按钮即可进入横屏页面。

项目需求及分析

项目需求

1、需求一：效果图一的星球要能支持左右滑动，滑动过程中还要能支持3D（远近缩放）的效果

2、需求二：效果图二会有多节课需要能支持左右滑动

3、需求三：效果图三内容要刚好占一屏

分析

1、分析需求一：星球切换部分使用swiper来实现。

2、分析需求二：好像没什么难的，使用系统默认的滚动条就可以支持滚动了。

3、分析需求三：嗯～，占一屏还不简单！直接按效果图尺寸写就好了。

实践总结

公司使用的是vue技术栈，所以下面的组件也是基于vue来写的。懂了原理我相信不管用什么框架去实现都不会有太大问题，所以不懂vue的同学也不用慌。

问题及解决方案

1、现在首先要做的第一件事情就是怎样先让页面横过来？

h5没有横屏属性那只能通过旋转页面的元素来达到横屏的效果了 transform: rotate(90deg); ，所以我们要首先要有一个 横屏容器 组件。然后把对应页面的内容都放在这个容器里面页面是不是就横过来了？

横屏容器组件代码如下：

<template>
    <section v-horizontal-screen @touchmove.prevent>
        <!-- 页面具体内容 -->
        <slot></slot>
    </section>
</template>
<script>
export default {
	directives: {
        'horizontal-screen': {
            bind(el, binding, vnode){
                let self = vnode.context;
                
                function reset(init){
                    
                    let width = document.documentElement.clientWidth,
                        height = document.documentElement.clientHeight;
                    //在竖屏状态我们通过添加transform:rotate(90deg)，来让这个页面横过来
                    if(window.orientation == null || window.orientation === 180 || window.orientation === 0){//竖屏状态
                        el.style.webkitTransform = el.style.transform = `rotate(90deg)`;
                        el.style.width = `${height}px`;
                        el.style.height = `${width}px`;
                        el.style.webkitTransformOrigin = el.style.transformOrigin = `${width / 2}px center`;
                        //如果已经处于横屏状态就不做其他处理了
                    }else if(window.orientation === 90 || window.orientation === -90){//横屏状态
                        el.style.webkitTransform = el.style.transform = `rotate(0)`;
                        el.style.width = `${width}px`;
                        el.style.height = `${height}px`;
                    }
                }
                reset(true);

                let timer = null;
                el.fn = function(e) {
                    clearTimeout(timer);
                    timer = setTimeout(reset, 300);
                }
                
                window.addEventListener('resize', el.fn, false);

                if("onorientationchange" in window){
                    window.addEventListener('orientationchange', el.fn, false);
                }
            },
            unbind(el, binding, vnode){
                window.removeEventListener('resize', el.fn, false);
                window.removeEventListener('orientationchange', el.fn, false);
            }
        },
    }
}
</script>
复制代码

现在页面已经横过来，接下来先让星球能够左右切换吧。是不是直接加入swiper插件就可以了？

尝试引入swiper插件，然后运行起来的时候会发现，手势反了，上下滑动的时候内容才会左右滑动。因为现在我们只是把页面横过来了，x轴和y轴并没有变。当我们上下滑动的时候实际上改变的是x轴，也就是正常页面的左右滑动。带着好奇心查了一下swiper的api看看是否有支持这种操作参数。结果没有查到，只好自己尝试去修改源码了。下面是修改代码后的部分截图：

增加了一个参数isReverse，如果为true则x轴和y轴反一反。当然isReverse还要判断一下特殊情况比如本来app就已经横屏了其实就没必要x轴y轴互反了。这样我们的内容又可以正常跟着手指方向滑动了。

前面暂定需求二的滚动方式采用默认滚动条来解决，结果实现出来之后发现手指滑动方向也是反。原生的手势反了，改怎么调整呢？网上查了一通没有找到答案，关键这问题也不是很好描述！因为之前有使用过iscroll，可以模拟系统滚动条的效果。尝试加入到代码中，发现和swiper一样也会出现手指滑动方向反的情况。最后也只能自己去源码中增加一个参数了。整体对比iscroll改动的代码要比swiper少的多。只需要改一个地方就可以了，截图如下：

需求一和需求二都解决了，接下来来解决“最简单”的第三个需求。其实按照设想不用做任何其它操作，只需要按照效果图的尺寸写就好了。

页面写好了，在电脑上跑也没什么问题。决定部署到测试环境用手机跑一下看看。结果发现右侧内容超出屏幕范围了。是因为在微信中有标题栏和底部栏，导致内容超出了屏幕范围。联想一下其实在不同长宽比的手机上 其实即使不存在标题栏和底部栏 其实也会有类似情况。这该怎么解决呢？最后决定在横屏容器组件内部再加入一个自动缩放组件，最后页面的框架图长下面这样。当然自动缩放组件只在需要的地方加入。

接下来一起看看比例缩放容器的代码吧。

<template>
	<div class="scale-wrap" :style="scaleWrapStyle">

		<slot></slot>

	</div>
</template>
<script>
//这块宽高比例根据效果图来设置
const DesignWidth = 375;
const DesignHeight = 667;
const DesignRatio = DesignWidth / DesignHeight;

function getScale(){

    let width = document.documentElement.clientWidth,
        height = document.documentElement.clientHeight;

    if(window.orientation == null || window.orientation === 180 || window.orientation === 0){//竖屏状态
    	
    }else {
    	[width, height] = [height, width];
    }

    let ratio = width / height;

    let scale;

    //通过计算实际手机宽高比和效果图的宽高比得出最终的所让比例
    if(ratio > DesignRatio){
    	scale = height / (width / DesignRatio);
    }else if(ratio < DesignRatio){
    	scale = width / (height * DesignRatio);
    }else{
    	scale = 1;
    }

    return scale;

}

export default {
    data(){
        return {
        
        }
    },
    computed: {
        scaleWrapStyle(){
            let scale = getScale();
            let scaleStr = `scale(${scale})`;
            return { 'transform': scaleStr, '-webkit-transform': scaleStr };
        }
    },
}
</script>
<style lang="less" scoped>
.scale-wrap{
	width: 100%;
	height:100%;
	display: flex;
	transform-origin: left center;
}
</style>
复制代码

到此为止我们已经实现了对横屏需求处理的一套方案～