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)
html5 手机APP计算高度问题的更多相关文章
- HTML5手机APP开发入(5)
HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(3) 如何实现MVC的代码重构,自定义一个P ...
- HTML5手机APP开发入(4)
HTML5手机APP开发入(4) 课程内容 完成一个自定义的Component用来展现通讯录用户的明细信息如下图 http://bootsnipp.com/snippets/featured/prof ...
- HTML5手机APP开发入(3)
HTML5手机APP开发入(3) 课程内容: 按照AngularJs MVC框架进行代码重构,新建一个DataService服务类使用SQLite插件实现储存对通讯录的本地存储. 涉及的知识点: An ...
- HTML5手机APP开发入门(2)
HTML5手机APP开发入门(2) 课程内容 使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作,有三个页面: ListPage,DetailPage,Ad ...
- HTML5手机APP开发入门(1)
HTML5手机APP开发入门(1) 开发框架 Ionicframework V2 + Angular 2 具体内容可以参考一下网站 http://ionicframework.net/ http:// ...
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
- MUI框架开发HTML5手机APP
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
随机推荐
- iOS 蓝牙4.0开发
背景: 1.iOS的蓝牙不能用来传输文件.2.iOS与iOS设备之间进行数据通信,使用gameKit.framework3.iOS与其他非iOS设备进行数据通信,使用coreBluetooth.fra ...
- Creating Apps With Material Design —— Defining Shadows and Clipping Views
View转载请注明 http://blog.csdn.net/eclipsexys 翻译自Developer Android,时间仓促,有翻译问题请留言指出,谢谢 定义阴影和裁减 材料设计引入了深度的 ...
- 显示目录树命令tree
-a:显示所有文件,包括隐藏文件 -d:只显示目录 -f:显示完整的文件名,包含路径 -L:显示目录树的深度 [root@rusky /]# tree -L -a -f /home /home |-- ...
- htm初学笔记
一.什么是html HTML(HyperText Markup Language):超文本标记语言,一种纯文本类型的语言 --使用带有尖括号的“标记”将网页中的内容逐一标识出来 用来设计网页的标记语言 ...
- NHIBERNATE之映射文件配置说明(转载4)
二十.自定义值类型 开发者创建属于他们自己的值类型也是很容易的.比如说,你可能希望持久化Int64类型的属性, 持久化成为VARCHAR 字段.NHibernate没有内置这样一种类型.自定义类型 ...
- 读取oracle页面或者进程卡住不动(死锁)
oracle最坑爹的地方:你insert update delete之后 或者kill死锁的时候记得一定要提交事务不然就是死锁卡在那里了 记住 kill死锁也是要提交事务的 select * ...
- Android-操作栏之选项菜单
回答第一个问题:什么是选项菜单?答:选项菜单就是可以显示在操作栏上的菜单. 菜单的视图需要建立在res/menu下. 其中,showAsAction属性用于指定菜单选项是显示在操作栏还是隐藏到溢出菜单 ...
- shell获取文件行数
获取文件行数: echo `cat $file | wc -l` 获取文件中不重复的行数(去重后) echo `awk '{$1="";print $0;}' $file_tel ...
- JAVADOC 常见使用方法 帮助文档
我们知道Java中有三种注释语句: 1.//用于单行注释. 2./*...*/用于多行注释,从/*开始,到*/结束,不能嵌套. 3./**...*/则是为支持jdk工具javadoc.exe而特有的注 ...
- 获取aplicationContext对象,从而获取任何注入的对象
在Servlet中 方法一: 从ServletContext 取出 Spring容器上下文 ApplicationContext applicationContext = (ApplicationCo ...