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)
时间: 2024-11-14 13:34:10

html5 手机APP计算高度问题的相关文章

HTML5手机APP开发入(3)

HTML5手机APP开发入(3) 课程内容: 按照AngularJs MVC框架进行代码重构,新建一个DataService服务类使用SQLite插件实现储存对通讯录的本地存储. 涉及的知识点: Angular2 Injectable的使用熟成的模块依赖注入 引用类库 引用SQLite插件和 Storage,SqlStorage模块 重构代码 新建一个Model 新建一个modules目录,新建一个contact.ts,定义一下字段的类型 新建一个dataService 引用类或plugin p

Html5 Web App 手机跨平台开发笔记

APP 开发平台包括Android 平台开发,Mac os X 平台开发以及Windows Phone 7平台开发.开发的程序都只能在各自手机系统上运行,如果开发出一种程序,能再以上任何系统上运行,那是多么美好的事情.而Html5 Mobile Web App就是其中一种跨平台方法.下面是相关知识的介绍 1.背景 HTML5是HTML的最新标准,HTML5的草案已经于2008年发布,目前W 3 C(万维网联盟)正在对此进行进一步完善.对许多人来说,早该进行这种改进了.十多年来,HTML一直没有进

HTML5定稿:手机App将三年内消失,互联网世界的第二次大战

HTML5与app以对立竞争的产品形态展现在大众视野.从去年开始又有一大批技术派或者创业者盯向html5领域,移动游戏的爆发和微信朋友圈等众多平台为HTML5导流,能不能颠覆,或许只是时间上的问题. 就像Apple成立前,HP的高层告诉沃兹:谁会在家里摆一台电脑呢?未来HTML5肯定会颠覆原生App.2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿. 过去这些年,HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来,HTML5将颠覆

手机APP开发自己做,还是找专业的团队

随着移动互联网时代迅速发展,许多企业发展或者个人创业,纷纷将目光转向手机APP开发领域.在这种大的市场趋势下,APP开发迎来了新的发展高潮.而提到手机APP开发,始终在自己组建团队,还是交给专业的公司做这个问题上徘徊不开. 许多创业公司想要自己组件团队,却大多会面临这样一个问题:在初始启动阶段,资金有限,相关技术人员难找,并且如果需要开发的APP功能比较复杂,工作量增多,投入的技术开发人员也会增多,这样开发费用当然也就越高,开发工期会加长:即使做一个最简单的APP开发也至少需要2-3个月,更别提

互联网时代,手机APP制作已逐渐成为主流

随着互联网的高速发展,智能手机从进入人们的视线开始,就成为了生活中的必需品.现实中,患有手机依赖症的人数不胜数,而他们依赖手机,追根结底是依赖智能手机上各种各款的APP.手机APP可以说大大的丰富了人们的业余生活,种类从聊天APP.影音APP.购物剁手APP等功能反复的软件到简单的计算器.备忘录,各种类型应有尽有,似乎少了手机APP的生活都不算完整.这也就使得手机APP制作成为当前企业顺应时代潮流发展的趋势了. 对于普通使用者来说,手机APP是他们排忧解压.享受业余之乐的工具,而对企业来说,手机

[HTML5]手机屏幕分辨率和浏览器分辨率

在使用CSS3的中有如下类似代码 Html代码 @media screen and (max-width:480px){ -- } 意思是在最大宽度为480px的设备上应用{}里面的样式.这里的width,注意是手机浏览器的分辨率,而不是手机设备的屏幕分辨率.比如苹果4的手机屏幕分辨率是960x640.而其自带的Safari浏览器的分辨率是320*480.我们可以通过如下代码检测所用的浏览器的分辨率: Js代码 $("#info").html("(您的浏览器的分辨率为:&qu

jmeter编写脚本之手机app抓包

pc端抓包及常用请求脚本编写,点击打开链接. 首先大家应该清楚手机app原理 据我了解,现在市面上收大概分两种, 一类是手游,用游戏引擎开发的客户端,这类我还未涉猎,不敢高谈: 二类是网站app,一般采用html5+css3作为app前端,实际上app就好比一个浏览器(其实也是浏览器内核),只要知道了主页登陆地址,我们就可以在模拟器上运行app了. 这里推荐使用chrome的开发者工具,具备手机浏览器模拟功能,还可以选择多种手机类型. 按F12开启抓包之旅(Windows系统) 如下图示:

手机 app 开发的几种方式 ionic 学习思路以及 ionic 新建的项目分析

手机 app 开发的几种方式 ionic 学习思路以及ionic 新建的项目分析 学习要点:1. 目前开发手机 app 的几种方式2. Ionic 学习思路简介3. Ionic CSS 框架4. ionic js 指令 路由 其他 ui 交互效果5. ionic 命令行/CLI 安装 调试 打包( 第三季 第一讲已讲)6. ionic 开发包下载 以及命令创建的项目分析 1. 目前开发手机 app 的几种方式原生/Native: 使用原生 SDK 开发 App.优点不用说, 当你有足够的资源,这

9款好看又实用的手机APP UI模板

一款优秀的界面设计,最重要的两点应该是产品本身的UI和用户体验(UX),唯有将二者完美结合才能称作优秀的设计作品.但随着智能手机及各类设计工具的发展,用户对手机界面设计的要求也与日俱增.这也就解释了为什么手机应用市场有很多APP功能差不多,但我们只使用一款就够了,而这一款必定有更优的界面设计及用户体验. App界面设计出色与否将直接影响App用户的体验.要提高UI设计水平,除了经历一定的实践及积累,还可以动手临摹或欣赏一些手机UI设计作品,提高审美能力.增加设计灵感.今天小编给大家挑选了9款由国