2022开篇H5手机页面特效

一转眼的功夫，2022已经悄然的来到；因为最近忙着一个中型项目的迭代和AR项目的上线，都已经N久没发表过技术类的文章；最上一篇还是上一年Iot同学那边送的开发板的开发入门介绍。今天我们就来说一下H5手机页面的特效吧；都2022年还H5？没办法H5实在太深入人心了，特别是在微信开放了外连接H5又变得重要了。所以就说一下最近开发H5的一些经验。

1、手机横竖的判断

移动天下手机先行，现在手机基本是70%的载体（余下的pad咯）；那么有一个问题就是手机竖屏和横屏的长宽高都不一样，那么对整体的页面布局都会发生重要的影响。

以下就是自动判断屏幕是否横竖：

        if ( window.orientation == 180 || window.orientation==0 ) { 
            alert("竖屏"); 
        } else if( window.orientation == 90 || window.orientation == -90 ) {
            alert("横屏"); 
        }

这个就是一进入页面进行判断，如果进入后对手机进行横竖能否即时判断呢？这个当然可以的，直接上代码：

        window.addEventListener('orientationchange', function(event) {
            if ( window.orientation == 180 || window.orientation==0 ) { 
                alert("竖屏"); 
            } else if( window.orientation == 90 || window.orientation == -90 ) {
                alert("横屏"); 
            }
        });

2、进行整体页面转向

判断到横竖，有时候可以通过不同的布局处理，但这样耗费的精力比较多，因为要做2套布局；所以我想到一个通过镜像翻转的功能，当然这个功能我还没应用上。横竖我用了2套布局处理。。累。这里就分享一下镜像翻转的代码，很简单只需要在CSS里加入。

body {
    -webkit-transform: rotate(90deg);
}

这样整个页面就会顺时针翻转90°。。有什么作用？存在即合理，以后有它的用途。

3、手机的重力感应与陀螺仪应用

现在能上H5的基本都是智能手机，一般情况下都带有重力感应与陀螺仪；那这2个有什么用？可以感应到手机的角度和移动的速度。举个例子：摇一摇其实就是用到这2个的数据。这个有一个开源的组件Parallax.JS【http://matthew.wagerfield.com/parallax/】在这里我就不展开讲解了，感兴趣的可以留言或自己去看看，这个我也用过一下，感觉比较容易上手和实现。。

最后说一下吧，小的H5应用直接上jq或jq mobile。。。好维护；当然现在流行VUE也行，不过感觉vue有点广。。见人见智吧。