博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html5 手机APP计算高度问题
阅读量:5809 次
发布时间:2019-06-18

本文共 2802 字,大约阅读时间需要 9 分钟。

安卓手机型号比较多,会出现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)

 

转载于:https://www.cnblogs.com/haitaoblog/p/5413480.html

你可能感兴趣的文章
感受JavaOne: 昔日风光何在?
查看>>
Junit (二) 断言
查看>>
Inception:LinkedIn是如何利用异常日志实现服务监控的
查看>>
面对勒索病毒:补救用三招 防御是高招
查看>>
助力家庭大换洗 金羚洗衣机“化繁为简”
查看>>
AT&T全面开通WiFi通话功能
查看>>
OA办公系统如何实现费控管理?
查看>>
浅析呼叫中心行业发展的“三化”趋势
查看>>
武汉网络信息安全产业有望冲进三甲
查看>>
微博活跃用户连续10季度增长超30%
查看>>
struts.xml加载失败的问题
查看>>
【hibernate框架】EJBQL第一部分
查看>>
(一三二)类的三种常见技术
查看>>
Android 为应用增加可移动的悬浮窗口
查看>>
看看mina和memcached的联姻(适合不同语言客户端,高并发?)
查看>>
hdu 5400 Arithmetic Sequence
查看>>
Android 学习笔记 Contacts ContentResolver query、add、update、delete 参数详解
查看>>
jvm间歇性崩溃分析
查看>>
hdu 2669 Romantic
查看>>
JSP语法(二)
查看>>