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 ...
随机推荐
- Android设备中实现Orientation Sensor(图)兼谈陀螺仪
设备中的三自由度Orientation Sensor就是一个可以识别设备相对于地面,绕x.y.z轴转动角度的感应器(自己的理解,不够严谨).智能手机,平板电脑有了它,可以实现很多好玩的应用,比如说指南 ...
- 单源最短路径(dijkstra算法)php实现
做一个医学项目,当中在病例评分时会用到单源最短路径的算法.单源最短路径的dijkstra算法的思路例如以下: 如果存在一条从i到j的最短路径(Vi.....Vk,Vj),Vk是Vj前面的一顶点.那么( ...
- 标准爬虫初探,来自Python之父的大餐!
首先不得不承认自己做了标题党.本文实质是分析500lines or less的crawlproject,这个project的地址是https://github.com/aosabook/500line ...
- AlwaysON同步过程
<SQL Server 2012实施与管理实战指南>中指AlwaysON同步过程如下: 任何一个SQL Server里都有个叫Log Writer的线程,当任何一个SQL用户提交一个数据修 ...
- 学习Android NestedScroll
NestedScrollingChildHelper 这是一个用于实现子视图嵌套滚动的辅助类,并提供对Android 5.0之前版本的前兼容. View要作为嵌套滚动中的Child,要在构造方法中实例 ...
- 随机获取oracle数据库中的任意一行数据(rownum)
最近看oracle资料的时候,了解rownum的概念,以前只知道对数据库表进行简单的增删改查: 看到了rownum的概念后,突然想到了好多业务场景应该都可以适用的,比如在进行随机发奖的时候, 我们就可 ...
- 高仿QQ即时聊天软件开发系列之一开端
前段时间在园子里看到一个大神做了一个GG2014IM软件,仿QQ的,那感觉···,赶快下载源码过来试试,还真能直接跑起来,效果也不错.但一看源码,全都给封装到了ESFramework里面了,音视频那部 ...
- CSS实现三角形效果
类似三角形的形状的元素在网页中可能会用到,我们可以用图片或者CSS元素达到我们想要的效果.这里讲一下是讲自己使用HTML+CSS实现三角形的方式. 为了能够熟悉的使用HTML+CSS构建三角形,我们首 ...
- 使用pcs api往免费的百度网盘上传下载文件
百度个人云盘空间大,完全免费,而且提供了pcs api供调用操作文件,在平时的项目里往里面保存一些文件是很实用的. 环境准备: 开通读写网盘的权限及获取access_token:http://blog ...
- python生成html文件浏览器中文显示乱码问题
近来在网上采集数据,想把采集下来的数据整合成html的形式保存.以便其他的平台产品可以直接读取html显示或者根据html标签提取数据. def output_html(self): try: fou ...