//定义全局变量
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的更多相关文章

  1. 【Android 应用开发】 自定义组件 宽高适配方法, 手势监听器操作组件, 回调接口维护策略, 绘制方法分析 -- 基于 WheelView 组件分析自定义组件

    博客地址 : http://blog.csdn.net/shulianghan/article/details/41520569 代码下载 : -- GitHub : https://github.c ...

  2. 微信小程序宽高适配

    小程序的宽任何机型都是750rpx,但是画布canvas的默认单位是px,可能会出现需要怪异的样式,我们可以用到 wx.getSystemInfoSync().windowWidth和 wx.getS ...

  3. 移动端rem字体适配JS

    // 『REM』手机屏幕适配,兼容更改过默认字体大小的安卓用户 function adapt(designWidth, rem2px) { // designWidth:'设计图宽度' 1rem==r ...

  4. JS 、JQ 获取宽高总结 & JS中getBoundingClientRect的作用及兼容方案

    1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位置集合.   执行 object.getBoundingClien ...

  5. js获取屏幕(设备)宽高

    平常获取设备的宽高无非就那几 <script language="javascript"> var h = ""; h += " 网页可见 ...

  6. 翻屏类 h5 适配方案:解决宽高自适应难题

    表格 图片等 宽度自适应  :width:100%;  box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及 ...

  7. js 和 jquery 里面几个获取宽高的调查

    罗列下 js 和 jquery 里面获取宽高的方法: obj.offsetWidth = $obj.outerWidth()  // offsetWidth obj.clientWidth = obj ...

  8. 前端 JS 获取 Image 图像 宽高 尺寸

    前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...

  9. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. Spring Cloud Alibaba基础教程:Sentinel Dashboard中修改规则同步到Apollo

    在之前的两篇教程中我们分别介绍了如何将Sentinel的限流规则存储到Nacos和Apollo中.同时,在文末的思考中,我都指出了这两套整合方案都存在一个不足之处:不论采用什么配置中心,限流规则都只能 ...

  2. 每日一题 - 剑指 Offer 37. 序列化二叉树

    题目信息 时间: 2019-06-29 题目链接:Leetcode tag:序列化 二叉树 队列 难易程度:中等 题目描述: 请实现两个函数,分别用来序列化和反序列化二叉树. 示例: 1 / \ 2 ...

  3. 《The Design of a Practical System for Fault-Tolerant Virtual Machines》论文研读

    VM-FT 论文研读 说明:本文为论文 <The Design of a Practical System for Fault-Tolerant Virtual Machines> 的个人 ...

  4. 缘起:BigTable

    Google的三篇论文,Google File System,MapReduce以及Big Table可以说是整个大数据领域的三驾马车,这里,我们简单介绍下这三驾马车基本都是干哈的,重点解读下Bigt ...

  5. Raft论文《 In Search of an Understandable Consensus Algorithm (Extended Version) 》研读

    Raft 论文研读 说明:本文为论文 < In Search of an Understandable Consensus Algorithm (Extended Version) > 的 ...

  6. WordPress教程之如何批量删除未引用(无用)的TAG标签

    WordPress文章与标签的关系 在WordPress中添加标签是非常方便的,只需要在写文章时在侧栏标签处添加一下就会自动在后台增加标签(所以你是不是也跟缙哥哥一样每篇文章都增加标签呢),不像分类目 ...

  7. 深入理解letter-spacing,word-spacing的对比区别

    letter-spacing lletter-spacing 属性增加或减少字符间的空白(字符间距). 该属性定义了在文本字符框之间插入多少空间.由于字符字形通常比其字符框要窄,指定长度值时,会调整字 ...

  8. Python-自动用0补取长度

    描述 Python zfill() 方法返回指定长度的字符串,原字符串右对齐,前面填充0. 语法 zfill()方法语法: str.zfill(width) 参数 width -- 指定字符串的长度. ...

  9. json转化为C#、Java、TypeScript、VisualBasic、Python实体类

    效果展示: 源码下载地址:https://github.com/doyoulaikeme/DotNetSample/tree/master/DotNetSample2

  10. DVWA学习记录 PartⅥ

    Insecure CAPTCHA 1. 题目 Insecure CAPTCHA(全自动区分计算机和人类的图灵测试),意思是不安全的验证码. 指在进行验证的过程中,出现了逻辑漏洞,导致验证码没有发挥其应 ...