微信

关于横竖屏的坑

css3可以使用媒体查询判断设备是横屏还是竖屏

//横屏时显示
@media all and (orientation : landscape) {
#screenMask{display:block}
}

//竖屏时隐藏
@media all and (orientation : portrait) {
#screenMask{display:none}
}

在手机浏览器中表现良好,微信中看样子也可以,但是微信网页中如果聚焦输入框,弹起键盘就有问题了.

软键盘弹起后,网页可用面积减小,安卓就自动识别为横屏了,原有的页面消失了,影响非常大.IOS则没有这个问题,媒体查询判断横竖屏在IOS上工作良好.

并且由此发现,css3媒体查询就是根据宽度是否比高度小来判断横竖屏的.

解决方案1

使用javascript的orientation和orientationchange判断

• window.orientation 属于window对象上一个属性；共有三个值 ：0为竖屏模式（portrait）,90为向左反转变为横屏模式（landscape），-90为向右反转变为横屏模式（landscape），最后180就是设备上下互换还是竖屏模式。
• orientationchange 是一个event，在设备旋转时，会触发此事件，如同PC上使用的resize事件。

(function(){
    var init = function(){
        var updateOrientation = function(){
            var orientation = window.orientation;
            switch(orientation){
                case 90:
                case -90:
                    orientation = 'landscape';
                    break;
                default:
                    orientation = 'portrait';
                    break;
            }

           //do something
           //比如在html标签加一个状态
            //然后根据不同状态，显示不同大小
            document.body.parentNode.setAttribute('class',orientation);
        };

        window.addEventListener('orientationchange',updateOrientation,false);
        updateOrientation();
    };

    window.addEventListener('DOMContentLoaded',init,false);
})();

经测试使用JS判断能够正确得出安卓微信客户端里输入框聚焦时的横竖屏状态.

orientation和orientationchange只有移动设备有这些属性和事件.

在不支持这种属性和事件的设备上使用宽高比来判断做一下兼容,这样在不支持orientation的设备上就相当于使用了媒体查询

最终总结代码如下:

(function(w)
{
    var supportOrientation = (typeof w.orientation === 'number' && typeof w.onorientationchange === 'object');
    var init = function()
    {
        var htmlNode = document.body.parentNode, orientation;
        var updateOrientation = function()
        {
            if(supportOrientation)
            {
                orientation = w.orientation;
                switch(orientation)
                {
                    case 90:
                    case -90:
                        orientation = 'landscape';
                        break;
                    default:
                        orientation = 'portrait';
                        break;
                }
            }
            else
            {
                orientation = (w.innerWidth > w.innerHeight) ? 'landscape' : 'portrait';
            }
            htmlNode.setAttribute('class',orientation);
        };
        if(supportOrientation)
        {
            w.addEventListener('orientationchange',updateOrientation,false);
        }
        else
        {
            //监听resize事件
            w.addEventListener('resize',updateOrientation,false);
        }
        updateOrientation();
    };
    w.addEventListener('DOMContentLoaded',init,false);
})(window);

可以访问如下网址测试: /html/wx