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

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

  1. HTML5手机APP开发入(5)

    HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(3) 如何实现MVC的代码重构,自定义一个P ...

  2. HTML5手机APP开发入(4)

    HTML5手机APP开发入(4) 课程内容 完成一个自定义的Component用来展现通讯录用户的明细信息如下图 http://bootsnipp.com/snippets/featured/prof ...

  3. HTML5手机APP开发入(3)

    HTML5手机APP开发入(3) 课程内容: 按照AngularJs MVC框架进行代码重构,新建一个DataService服务类使用SQLite插件实现储存对通讯录的本地存储. 涉及的知识点: An ...

  4. HTML5手机APP开发入门(2)

    HTML5手机APP开发入门(2) 课程内容 使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作,有三个页面: ListPage,DetailPage,Ad ...

  5. HTML5手机APP开发入门(1)

    HTML5手机APP开发入门(1) 开发框架 Ionicframework V2 + Angular 2 具体内容可以参考一下网站 http://ionicframework.net/ http:// ...

  6. MUI框架开发HTML5手机APP(一)--搭建第一个手机APP

      前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...

  7. MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)

    出处:http://www.cnblogs.com/jerehedu/p/7832808.html  前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...

  8. MUI框架开发HTML5手机APP

    出处:http://www.cnblogs.com/jerehedu/p/7832808.html  前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...

  9. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

随机推荐

  1. Eclipse 4.2 + Tomcat 7.x + JDK 7 搭建Java Web开发环境

    1. 准备工具 Eclipse 4.2 (到官网下载:http://www.eclipse.org/downloads/  要下载Eclipse IDE for Java EE Developers ...

  2. Android学习之路——Android四大组件之activity(二)数据的传递

    上一篇讲了activity的创建和启动,这一篇,我们来讲讲activity的数据传递 activity之间的数据传递,这里主要介绍的是activity之间简单数据的传递,直接用bundle传递基本数据 ...

  3. CCSpawn使用CCRepeatForever无效

    在使用CCSpawn中加入CCRepeatForever,但却无法使用CCRepeatForever的效果. CCActionInterval* action =(CCActionInterval*) ...

  4. Linux学习笔记01:Linux下的drwxr-xr-x

    1. drwxr-xr-x 第1字母:表示文件类型     d   ------- 表示文件目录(directory)     -    ------- 表示二进制文件     l    ------ ...

  5. linux-Python升级安装

    Wget https://www.python.org/ftp/python/3.5.0/Python-3.5.0.tgz tar zxvf Python-3.5.0.tar.gz && ...

  6. 关于driver_register做了些什么

    现在进入driver_register()函数去看看.在driver_register() 中,调用了driver_find(drv->name, drv->bus)函数,这里是干啥呢?这 ...

  7. 文件操作2 cp mv rm

    1.cp命令 [root@rusky /]# cp 123 /test  #在linux系统中,如果文件123已经存在,则提示用户确认,在unix系统中则不提示,除非使用参数-i 交互式操作.cp: ...

  8. AlwaysON同步过程

    <SQL Server 2012实施与管理实战指南>中指AlwaysON同步过程如下: 任何一个SQL Server里都有个叫Log Writer的线程,当任何一个SQL用户提交一个数据修 ...

  9. Form( 表单) 组件

    本节课重点了解 EasyUI 中 Form(表单)组件的使用方法, 这个组件不依赖于任何组件.一. 加载方式表单组件只能在 JS 区域设置,首先定义一张表单.<form id="box ...

  10. MVC4 数据库连接字串

    1.SQL Server <add name="DBEntities" connectionString="Data Source=.;Initial Catalo ...