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 ...
随机推荐
- 共享IP云主机(VPS)玩转wdcp
目前国内有不少性能还不错的共享IP VPS,但因为没有独立IP,所以环境配置起来会比较麻烦. 因为本人自己现在用的就是共享IP的vps,所以把一些配置方法分享一下,供大家参考. 首先是系统的选择,根据 ...
- Loadrunner结果分析Graphs
Transactions(用户事务分析)----用户事务分析是站在用户角度进行的基础性能分析. Transation Sunmmary(事务综述)----对事务进行综合分析是性能分析的第一步,通过分析 ...
- C#调用R语言输出图片
参考:http://rdotnet.codeplex.com/documentation REngine.SetEnvironmentVariables(); REngine engine = R ...
- J2EE (十) 简洁的JSTL、EL
简介 JSTL(JSP Standard Tag Library ,JSP标准标签库)是一个不断完善的开放源代码的JSP标签库. 由四个定制标记库(core.format.xml 和 sql)和一对通 ...
- MVC实现类似QQ的网页聊天功能-Ajax(上)
说到QQ聊天,程序员首先想到的就是如何实现长连接,及时的接收并回馈信息.那么首先想到的就是Ajax,Ajax的运行机制是通过XMLHttpRequest向服务器发出异步请求,并接受数据,这样就可以实现 ...
- Python进阶之路---1.5python数据类型-字符串
字符串 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; ...
- [编译原理代码][NFA转DFA并最小化DFA并使用DFA进行词法分析]
#include <iostream> #include <vector> #include <cstring> #include "stack" ...
- sqlserver中的锁与事务
以下内容整理自: SQL Server中的锁 SQLSERVER中的元数据锁 SQLSERVER中的锁资源类型 浅谈sqlserver中的事务和锁 锁的分类 1.从数据库角度 独占锁(排它锁 X) 独 ...
- [c#]控制台进度条的示例
看到[vb.net]控制台进度条的示例 感觉很好玩,翻译成C#版. using System; using System.Collections.Generic; using System.Linq; ...
- Limited Edition for Visual Studio 2013 图文教程(教你如何打包.NET程序)
原文:InstallShield Limited Edition for Visual Studio 2013 图文教程(教你如何打包.NET程序) InstallShield Limited Edi ...