移动Web开发实战-横竖屏适配

概述

在我们平时的移动Web页面开发过程中，经常会遇到需要横竖屏处理的情况。一般情况下我会项目实际情况，比如页面一般打开的情景是横屏还是竖屏，项目是否需要增加横竖屏适配，页面结构是否复杂等。

情景一

写好默认横屏页面，竖屏切换时显示提示结构

CSS媒体查询

//横屏
@media (orientation: landscape){
    //显示提示结构
}
//@media screen and (orientation: portrait)

情景二

横屏竖屏两套结构，CSS媒体查询选择性显示，跟方案一类似，不过这个是出了两套设计稿，如

情景三

我们在用rem布局时，参考《移动Web开发基础-rem布局》

如果是竖屏，按照我的习惯，我会先规定750的设计稿对应的rem计算规则是：1rem = 100px;也就是设置html font-size大小为100px，iPhone6设备，375px的设备html font-size大小为50px，这样我们计算起来还是比较方便的。

/*rem计算根元素字体大小*/
!(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth < 750) {
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            } else {
                docEl.style.fontSize = '100px';
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

可以看到上面的脚本计算基准是以750为标准的，同理，如果是640的设计稿，那我们这两个地方应该改成640，同理，如果是横屏的设计稿1334呢，那我们这两个值应该改成1334。

那么问题来了，如果现在项目要求横竖屏两套模板，而且你又打算用如上rem方式来适配的话，那是不是意味着你需要根据横竖屏750的设计稿和1334的设计稿出两套计算html font-size大小的脚本，也就是加个条件判断。

如何判断横竖屏？

function detectOrient() {
    var cw = document.documentElement.clientWidth;
    var _Width = 0,
        _Height = 0;
    sw = window.screen.width;
    sh = window.screen.height;
    _Width = sw < sh ? sw : sh;
    _Height = sw >= sh ? sw : sh;
    if(cw == _Width) {
        // 竖屏
        return;
    }
    if(cw == _Height){
        // 横屏
        return;
    }
}

获取屏幕宽高，和文档宽度
当文档宽度 = 屏幕宽度的话，那就是竖屏；当文档高度 = 屏幕宽度的话，那就是横屏。
这里横竖屏的脚本判断可以看下这里《探讨判断横竖屏的最佳实现》

我在这个基础上写了一份脚本，看官您可以看看是不是挺简单

/*rem计算根元素字体大小 */
init();

function init(){
    var docEl = document.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        detect = function(){
            detectOrient();
        };

    if (!document.addEventListener) return;
    window.addEventListener(resizeEvt, detect, false);
    document.addEventListener('DOMContentLoaded', detect, false);
}

function detectOrient() {
    var cw = document.documentElement.clientWidth;
    var _Width = 0,
        _Height = 0;

    sw = window.screen.width;
    sh = window.screen.height;
    _Width = sw < sh ? sw : sh;
    _Height = sw >= sh ? sw : sh;

    if(cw == _Width) {
        // 竖屏
        setFont(true);
        return;
    }
    if(cw == _Height){
        // 横屏
        setFont(false);
        return;
    }
}

// @ori boolean 屏幕方向，默认竖屏 true
function setFont(ori){
    var docEl = document.documentElement;
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;

    //横屏
    if (!ori) {
        if (clientWidth < 1334) {
            docEl.style.fontSize = 100 * (clientWidth / 1334) + 'px';
        } else {
            docEl.style.fontSize = '100px';
        }
    }else{
    //竖屏
        if (clientWidth < 750) {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        } else {
            docEl.style.fontSize = '100px';
        }
    }
}

当然，实现的方式有很多种。

总结

横竖屏的处理不止上面介绍的这几种情况，还有很多，比如大家常用的游戏类的APP里面的论坛、视频、直播之类的，都是有考虑横竖屏如何展现和适配，可以参考和总结下来。