安卓手机型号比较多,会出现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. 华为OJ:2041 放苹果

    这道题难点不在于代码怎么写,而是思路怎么想. 感觉一般这样的题要么你理好一个思路要么你最后总结出一个公式,要么你自己模拟它的运作方式,用迭代,或者递归的方式来做. 有点像我们曾经学的排列组合. 对于m ...

  2. Linux常见面试题

      一.填空题:1. 在Linux系统中,以 文件 方式访问设备 .2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统.3. Linux文件系统中每个文件用 索引节点来标 ...

  3. [Javascript] JSON.parse API

    JSON (JavaScript Object Notation) is a standard method to serialize JavaScript objects and is common ...

  4. Nested Class Templates

      Templates can be defined within classes or class templates, in which case they are referred to as ...

  5. Java程序性能分析工具Java VisualVM(Visual GC)—程序员必备利器

    VisualVM 是一款免费的\集成了多个JDK 命令行工具的可视化工具,它能为您提供强大的分析能力,对 Java 应用程序做性能分析和调优.这些功能包括生成和分析海量数据.跟踪内存泄漏.监控垃圾回收 ...

  6. Http请求的 HttpURLConnection 和 HttpClient

    HTTP 请求方式: GET和POST的比较 请求包.png 例子.png 响应包.png 例子.png 请求头描述了客户端向服务器发送请求时使用的http协议类型,所使用的编码,以及发送内容的长度, ...

  7. linux命令帮助

    Linux命令格式:command [options] [arguments]command:命令options: 参数 [] 表示是可选的;<> 表示是可变化的; x|y|z 表示只能选 ...

  8. ArcGis ToolBar为灰色

    问题描述:添加完导航按钮,测试时发现按钮一直都是灰色的,不可用状态. 可能原因:跟控件添加的顺序有关,导致toolbar跟map控件无法正确关联. 解决方案:删掉toolBar,重新添加.

  9. ASP.NET MVC3.0或4.0设置二级域名的方法

    之前我就想做二级域名指向同一个IP同一个程序无非是在路由匹配规则上做文章也就是对Url的重写的一种思路.我用了半天时间上网查阅了相关资料并做了Demo测试是完全 以的,在这分享给大家... 假如网站主 ...

  10. asp.net 面试基础题

    WebSite和WebApplication的区别1)当改变后台代码时,WebApplication需重启浏览器或者重新生成解决方案,而WebSite则不用:2)WebSite没有Solution,没 ...