移动端H5之动态设置html的font-size的横屏BUG修复以及横屏提示 by FungLeo

移动端H5之动态设置html的font-size的横屏BUG修复以及横屏提示 by FungLeo

前言

在上一篇 移动端之在不同尺寸大小的手机上展示同一效果解决方案 中,我们考虑的只是默认竖屏的情况.很显然,如果用户手机允许屏幕旋转,那么在横屏的情况下,页面就变得很恶心了.

因此我们需要进行一个处理,来判断浏览器是否是横屏,在横屏的情况下,要使用高度值来计算html的font-size.

代码

因为项目引入了jquery,因此下面的代码全部是jquery语法.

function htmlFontSize(){
    var win = $(window),
        winH = win.height(),
        winW = win.width(),
        hfz;
    winW > winH ? hfz = winH : hfz = winW;
    $("html").css('font-size',~~(hfz*100000/36)/100000+"px");
}

通过上面的代码,就可以在横屏的情况下正确的显示页面的大小了.但是,横屏的情况下,页面会变得比较怪异,应该给用户一个提示.

百度了一下,找到了横屏的事件与解决方法.

function orientationChange() {
    if (window.orientation==90 || window.orientation==-90){
        alert("横屏下不能获得最佳体验,建议竖屏浏览网页!");
    }
};

横屏提示代码如上.

再然后,就是在正确的时候要执行这些函数了.

$(function(){
    htmlFontSize();
    $(window).on("resize",function(){
        htmlFontSize();
    });
    orientationChange();
    $(window).on("orientationchange",function(){
        orientationChange();
    });
});

如上.效果是正确的.但是,好像我用了两个事件有点多余.因此,可以将代码整合到一个事件里面.

$(function(){
    htmlFontSize();
    orientationChange();
    $(window).on("orientationchange",function(){
        htmlFontSize();
        orientationChange();
    });
});

这里需要提醒的是resize事件在PC上进行调试的时候还是很好用的.

最后,这两个函数完全可以合并到一个函数里面.就不多写了.因为,领导说横屏下我做的效果还不错,就不用提示了:)

本文由FungLeo原创,允许转载.但转载必须署名作者,并保留文章首发链接.否则将追究法律责任.

首发地址:http://blog.csdn.net/FungLeo/article/details/51221622