//定义全局变量
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. abp审计日志功能的关闭

    参考官网介绍:https://aspnetboilerplate.com/Pages/Documents/Audit-Logging

  2. Asp.Net Core Blazor之容器部署

    写在前面 Docker作为开源的应用容器引擎,可以让我们很轻松的构建一个轻量级.易移植的容器,通过Docker方式进行持续交付.测试和部署,都是极为方便的,并且对于我们开发来说,最直观的优点还是解决了 ...

  3. 真懂Spring的@Configuration配置类?你可能自我感觉太良好

    当大潮退去,才知道谁在裸泳.关注公众号[BAT的乌托邦]开启专栏式学习,拒绝浅尝辄止.本文 https://www.yourbatman.cn 已收录,里面一并有Spring技术栈.MyBatis.中 ...

  4. JavaWeb项目的目录结构解释(上):

    当我们在IDEA创建JavaWeb项目时,默认的一般会有下图的目录结构,你的开发就是按照下列结构进行开发的,那么我就逐一解释他们的意思: 首先是demo:这个是项目的名字,一般你是自己创建一个与自己项 ...

  5. 数据源管理 | 搜索引擎框架,ElasticSearch集群模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.集群环境搭建 1.环境概览 ES版本6.3.2,集群名称esmaster,虚拟机centos7. 服务群 角色划分 说明 en-maste ...

  6. Java批量入库Demo

    java中往数据库批量插入数据Demo java代码: //入库数据是需要批量入库的List int len =入库数据.size(); //每次循环10条 int incremnet = 10; / ...

  7. android studio 正式版打包错误的一个问题

    今日在下载了别人的demo后,编译到我的手机上,然后通过qq等把软件发到其他的手机上使用时,无法安装,好像是因为这个是调试版本才安装不上,在网搜了一堆资料怎么建key怎么发布正式的版本,问题现在已解决 ...

  8. 什么?你正在学web自动化测试?那这些Selenium的基本操作你了解过吗?

    在自动化测试中,我们都知道是通过定位元素来实现的,那么有时候我们定位元素定位不到是为什么呢? 1.页面出现了iframe 2.出现了新的窗口,没有实现句柄的切换 3.三种等待方式,没有选择其中之一来使 ...

  9. 第四章:View的工作原理

    4.1 ViewRoot和DecorView ViewRoot对应于ViewRootImplement类,它是连接WindowManager和DecorView的纽带,View的三大流程均是通过Vie ...

  10. db2创建nickname

    db2创建nickname创建步骤 1.创建 server create server servername type DB2/AIX version 10.5 wrapper drda authid ...