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)