//定义全局变量
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. MySQL 字符串索引优化方案

    字符串建立索引的优化 1. 建立前缀索引 假设建立一个支持邮箱登录的用户表,对于邮件字段来说,可以有以下几种建立索引的方式: 直接对整个字符串建立索引 alter table SUser add in ...

  2. code first 更新字段

    protected override void Up(MigrationBuilder migrationBuilder) { migrationBuilder.AddColumn<string ...

  3. python中的守护线程

    什么是守护线程:在后台运行,为其他线程提供服务的线程成为守护线程. 为什么要引入守护线程: thread模块不支持守护线程的概念,当主线程退出时,所有的子线程都将终止,不管它们是否仍在工作, 如果你不 ...

  4. Oracle 11g数据脱敏

    Oracle 11g数据脱敏 前言 最近开发人员有个需求,导一份生产库的数据到测试库. 由于生产数据安全需要,需要并允许对导出的数据进行加密脱敏处理. 关于加密和脱敏 个人理解, 加密是通过一系列规则 ...

  5. 特殊方格棋盘【状压DP】

    特殊方格棋盘[状压DP] 讲真状压DP这个东西只不过是有那么亿丢丢考验心态罢了(确信) 先从板子题说起,另加一些基础知识 题目描述 在的方格棋盘上放置n 个车,某些格子不能放,求使它们不能互相攻击的方 ...

  6. 常见Python的Web开发框架

    在今天,Python里有很多开发框架用来帮助你轻松创建web应用.web开发框架存在的意义就在于可以快速便捷的构建应用,而不用去在意那些没必要的技术细节(协议.报文.数据结构). 到2020年为止,基 ...

  7. Github和Azure DevOps的代码同步

    [前言]Github和Azure DevOps都提供了Git代码库功能,那么有没有办法将两边的代码库进行同步呢,答案是肯定的.这里的操作我都是用Azure DevOps的Pipelines功能来完成的 ...

  8. Pop!_OS安装与配置(一):下载安装

    Pop!_OS安装过程 0x0 Pop!_OS简介 0x1 下载 0x2 启动盘制作 0x3 重启安装 如何分区 0x4 重启进入Pop!_OS 0x0 Pop!_OS简介 Linux发行版选哪个? ...

  9. MySQL数据库的卸载与安装

    MySQL数据库的卸载与安装 MySQL的完全卸载 因为不知道什么原因,电脑里同时存在两个版本的mysql,所以决定卸载重新安装,但是大家都说MySQL很难清除干净,所以特地查找完全卸载MySQL的方 ...

  10. python 网络爬虫报错“UnicodeDecodeError: 'utf-8' codec can't decode byte 0x8b in position”解决方案

    Python3.x爬虫, 发现报错“UnicodeDecodeError: 'utf-8' codec can't decode byte 0x8b in position 1:invalid sta ...