移动端宽高适配JS
//定义全局变量
var winWidth = 0; /*窗口宽度*/
var winHeight = 0; /*窗口高度*/ //函数区 //实时获取浏览器窗口大小,当窗口大小变化开始相应操作 function winchange() {
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测,获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
winHeight = document.documentElement.clientHeight; //获取视窗高度
winWidth = document.documentElement.clientWidth; //获取视窗宽度
} //根据窗口变化调整网页各版块高度 自用函数区
$(".middle").height(winHeight-$(".header").height()-$(".foot").height());/*中间内容的高度*/ }
$(function(){
//根据窗口大小计算布局高度
winchange();
window.onresize=winchange;
});
移动端宽高适配JS的更多相关文章
- 【Android 应用开发】 自定义组件 宽高适配方法, 手势监听器操作组件, 回调接口维护策略, 绘制方法分析 -- 基于 WheelView 组件分析自定义组件
博客地址 : http://blog.csdn.net/shulianghan/article/details/41520569 代码下载 : -- GitHub : https://github.c ...
- 微信小程序宽高适配
小程序的宽任何机型都是750rpx,但是画布canvas的默认单位是px,可能会出现需要怪异的样式,我们可以用到 wx.getSystemInfoSync().windowWidth和 wx.getS ...
- 移动端rem字体适配JS
// 『REM』手机屏幕适配,兼容更改过默认字体大小的安卓用户 function adapt(designWidth, rem2px) { // designWidth:'设计图宽度' 1rem==r ...
- JS 、JQ 获取宽高总结 & JS中getBoundingClientRect的作用及兼容方案
1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位置集合. 执行 object.getBoundingClien ...
- js获取屏幕(设备)宽高
平常获取设备的宽高无非就那几 <script language="javascript"> var h = ""; h += " 网页可见 ...
- 翻屏类 h5 适配方案:解决宽高自适应难题
表格 图片等 宽度自适应 :width:100%; box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及 ...
- js 和 jquery 里面几个获取宽高的调查
罗列下 js 和 jquery 里面获取宽高的方法: obj.offsetWidth = $obj.outerWidth() // offsetWidth obj.clientWidth = obj ...
- 前端 JS 获取 Image 图像 宽高 尺寸
前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...
- js获取隐藏元素宽高的方法
网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...
随机推荐
- 数据的编码和解码--java例子
昨天借了一本<网络程序设计实验教程(java语言)>,然后看了第一章,一个Swing例子,于是为大家分享一下! 关于数据的编码与解码,我觉得就例子而言已经交待得非常清楚了,两种方法做的. ...
- lodash - slice
稀疏数组和密集数组 稀疏数组 Sparse arrays 一般来说,JavaScript 中的数组都是稀疏数组-它们可以拥有空槽,所谓空槽,指的就是数组的某个位置没有任何值,既不是 undefined ...
- [开源]eCharts配置简化包OptionCreator[typescript版]
eCharts存在问题 配置eCharts的option,对于大部分的开发者来说,复杂情况下是一件繁琐的事情.为什么繁琐,大致有以下这些原因 大小写敏感:在没有IDE的智能提示下,很容易写错,而且即使 ...
- 求助:Runtime exception at 0x004000bc: invalid integer input (syscall 5)
代码 .data S17: .asciiz "the bigger one is:" .text move $fp $sp j main max: lw $t8 ($sp) sub ...
- 前端同学经常忽视的一个 JavaScript 面试题
题目 function Foo() { getName = function () { alert (1); }; return this; } Foo.getName = funct ...
- c++ 随机生成带权联通无向图
提示 1.请使用c++11编译运行 2.默认生成100个输出文件,文件名为data1.in到data100.in,如有需要自行修改 3.50000以下的点1s内可以运行结束,50000-300000的 ...
- 数据可视化之DAX篇(三) 认识DAX中的表函数和值函数
https://zhuanlan.zhihu.com/p/64421003 学习 DAX 的过程中,会遇到各种坑,刚开始甚至无法写出一个正确的度量值,总是提示错误.其实很多原因都是不理解 DAX 函数 ...
- 数据可视化之分析篇(十)Power BI应用:如何计算在职员工数量?
https://zhuanlan.zhihu.com/p/128652582 经常碰到的一类问题是,如何根据起止日期来计算某个时间点的数量,比如: 已知合同的生效日期和到期日期,特定日期的有效合同有 ...
- 精通java并发-wait,notify和notifyAll的总结(含案例)
目前CSDN,博客园,简书同步发表中,更多精彩欢迎访问我的gitee pages wait,notify和notifyAll 总结 在调用wait方法时,线程必须要持有被调用对象的锁,当调用wait方 ...
- 如何理解Javascript中的函数(Function)
Function类型 首先得知道,每个函数都是Function类型的实例,所以函数本身是对象. 示例1: function sum (num1, num2){ return sum1 + sum2; ...