html5 手机APP计算高度问题

安卓手机型号比较多,会出现bottom:0 找不到底部的问题,所以需要计算手机可视区域高度,这样便于使用百分比适配

(function(window,undefined){

    /**    
     *  js_height.js  计算页面高度
     *  调用方法:jsHeight.bodyheight();    参数ID sub   ID给某个DIV加高度  sub某个div高度的减值
     *     @date 2015-12-28
     *    @author haitaowang
     */
    function Appheight(){}  
    Appheight.prototype.winHeight = 0;
    Appheight.prototype.obtainHeight = function(){
        if (window.innerHeight){
            this.winHeight = window.innerHeight; 
        }else if ((document.body) && (document.body.clientHeight)){
            this.winHeight = document.body.clientHeight;         
        }
        if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 
        { 
            this.winHeight = document.documentElement.clientHeight; 
        }
        return this.winHeight;
    }

    /**    
     *  给页面body加载高度
     *     @date 2015-12-28
     *  @param sd 设置ID内宽度,兼容小四用
     *    @author haitaowang
     */
    Appheight.prototype.bodyheight = function(sd){   //计算页面的高度
        var body = this.getid("body"); //获取body对象
        body.style.height = "";
        if(typeof sd == "string"){
            this.iphone4(sd,body);  //苹果4兼容
        }else{
            body.style.height=this.obtainHeight()+"px";    
        }
    }
    /**    
     *  小4兼容方法
     *     @date 2015-12-28
     *  @param sd 设置ID内宽度,兼容小四用
     *    @author haitaowang
     */    
    Appheight.prototype.iphone4 = function(id,dom){
        if(this.obtainHeight()=='460'||this.obtainHeight()<'460'){ //判断4S
            document.getElementById(id).style.paddingBottom="35%";  
            var d1 = document.getElementById("container"); //获取dom对象
            var h1=d1.clientHeight+d1.scrollHeight;
            var h2=d1.offsetHeight+49;
            if(h2>this.obtainHeight()){
                dom.setAttribute("style","height:"+h2+"px;");            
            }else{    
                dom.style.height=this.obtainHeight()+"px";
            }
            return false;
        }else{
            dom.style.height=this.obtainHeight()+"px";        
        }    
    }
    Appheight.prototype.getid = function(id){
        if(id=="body" && typeof id=="string"){
            return document.getElementsByTagName(id)[0];
        }else{
            return document.getElementById(id);
        }    
    }
    /**    
     *  设置页面最大高度并出轮动条
     *     @date 2015-12-28
     *  @param id 需要设置的ID
     *  @param sub 需要减掉的值
     *    @author haitaowang
     */
    Appheight.prototype.max_height = function(id,sub){
        var maxHeight;
        maxHeight = this.obtainHeight()-sub+"px";
        document.getElementById(id).style.maxHeight = maxHeight;
        document.getElementById(id).style.overflow = "auto";
    }
    window.jsHeight = new Appheight();
})(window,undefined)

 

posted @ 2016-04-20 17:03  wangwht  阅读(1446)  评论(0编辑  收藏  举报