手机端始终横屏

在公司里做的一些业务型项目主要是 H5 类型的游戏呀相册呀动效图之类的，所以总避免不了要去满足那些喜爱横屏的设计稿...

 

但比较蛋疼的是，客户并不太爱吃这个瓜。

“开横屏好麻烦呀...”

“手机开了横屏还得微信也开横屏...”

“我...我不看这些...”

 

所以...坑总是要填的...

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

有搜到这个，但好像并没有卵用，所以就没管了，呵呵呵，我就是这么懒

 

所以，换了种思路，既然可以借鉴的没有那就换自己开发吧

一开始想的是用 @media (orientation : landscape) {} 这种办法，呵呵呵，你试试呗

 

不过方向还是挺对的，就是好像旋转的中心不太对，

于是乎再加上一个根据屏幕横宽比计算中心点的，产生了下面这段飘着浓浓随便口味的代码。

测试后发现，结果竟然还不错。

$(window).on('load resize',function(){
    var w = window.innerWidth, h = window.innerHeight;
    var $container = $('.main');
    if (w<h) {
        $container.css({
            'width': h,
            'height': w,
            'transform': 'rotate(90deg)',
            '-webkit-transform': 'rotate(90deg)',
            'transform-origin': w/h/2*100+'% 50%',
            '-webkit-transform-origin': w/h/2*100+'% 50%'
        })
    } else {
        $container.removeAttr('style');
    }
})

 

没错，只需要把 $container 的取值改掉就好了。

实验的几个手机和浏览器都能做到强制横屏，且与手机设置无关。

en，这篇就这么开心的结束了。