js获取浏览器的宽度和高度（js或者jquery如何实时获取浏览器的高度和宽度的）

本文目录

• js或者jquery如何实时获取浏览器的高度和宽度的
• JS获取页面内容宽度各浏览器不一
• javascript获取浏览器视口宽高
• jquery js如何获取移动设备浏览器高度
• js 如何获得浏览器的高度
• jquery或js 如何时时获取浏览器当前的宽和高
• js 如何获取浏览器的高度
• 如何用 js 取得浏览器的高度并赋值给div
• JS 获取当前浏览器宽高
• js怎么获取微信浏览器title的高度

js或者jquery如何实时获取浏览器的高度和宽度的

jquery
$(function(){
/*调整窗口自动调整宽度*/
$(window).resize(function(){
var h = $(window).height();
var w = $(window).width();
console.info("窗口高度：" + h + "; 窗口宽度：" + w);
});
});

JS获取页面内容宽度各浏览器不一

你可以用document.body.scrollWidth
来获取，但兼容性本人没有做过测试。 给你个参考：网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth(包括边线的宽)
网页可见区域高：document.body.offsetHeight(包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop(IE7无效)
网页被卷去的左：document.body.scrollLeft(IE7无效)网页被卷去的高：document.documentElement.scrollTop(IE7有效)网页被卷去的左：document.documentElement.scrollLeft(IE7有效)
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
相对于窗口左上角的X：window.event.clientX相对于窗口左上角的Y：window.event.clientY
相对于整个页面的X：window.event.X
相对于整个页面的Y：window.event.Y

javascript获取浏览器视口宽高

//js部分
$(document).ready(function() {
$("#button").click(function() {
alert("高："+$(document).height()+" 宽："+$(document).width());
});
});

《!-- html 部分 --》
《button id="button"》点击显示《/button》

你真确定不好使？检查一下jquery路径吧。

jquery js如何获取移动设备浏览器高度

获取代码如下：

《script》

var w=document.documentElement?document.documentElement.clientHeight:document.body.clientHeight;

alert(w);

《/script》

获取浏览器的高度：jquery代码直接使用 $(window).height()。

获取浏览器的宽度：

jquery代码直接使用 $(window).With();

原生态JS代码：

var w=document.documentElement?document.documentElement.clientWidth:document.body.clientWidth。

js 如何获得浏览器的高度

要在js中获得浏览器的高度可以参考以下步骤(具体代码见最后）：
1、outerHeight属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。
2、outerWidth属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）。
3、innerheight 返回窗口的文档显示区的高度。
4、innerwidth 返回窗口的文档显示区的宽度。
补充：
在浏览器兼容方面：
1、所有主流浏览器都支持 outerWidth 和 outerHeight 属性。
注意：IE 8 及更早 IE 版本不支持该属性。
2、所有主流浏览器都支持 innerWidth 和 innerHeight 属性。
注意：IE 8 及更早 IE版本不支持这两个属性。
获取代码：
《 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
《head》
***隐藏网址***
《/meta》《/head》
《body》
《h3 align="center"》请调整浏览器窗口大小《/h3》《hr /》
《form action="#" method="get" name="form1" id="form1"》
《!--显示浏览器窗口的实际尺寸--》
浏览器窗口 的 实际高度: 《input type="text" name="availHeight" size="4"/》《br /》
浏览器窗口 的 实际宽度: 《input type="text" name="availWidth" size="4"/》《br /》
《/form》
《script type="text/javascript"》
《!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
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;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//--》
《/script》
《/body》
《/html》

jquery或js 如何时时获取浏览器当前的宽和高

获取步骤如下所示。

1：可以使用定时器setInterval，每秒获取一次浏览器的宽和高。

2：使用jQuery可以这样获取window的宽高。

3：宽度 $(window)width() ，高度$(window).height()，自己写个函数，设定定时器的时间。

4：《body onresize="showSize()"》 ，页面相关事onresize浏览器的窗口大小被改变时触发此事件。

js 如何获取浏览器的高度

js获取浏览器可见区域(不包括标题栏、地址栏、收藏夹栏状态栏等额外区域，仅为页面呈现区域)的高度和宽度
宽度：document.documentElement.clientWidth
高度：document.documentElement.clientHeight
文档类型：XHTML1.0
浏览器：ALL

如何用 js 取得浏览器的高度并赋值给div

js取得浏览器的高度并赋值给div的步骤如下：

***隐藏网址***

2.请调整浏览器窗口大小《/h3》《hr /》《form action="#" method="get" name="form1" id="form1"》《!--

3.显示浏览器窗口的实际尺寸--》浏览器窗口 的 实际高    度: 《input type="text" name="availHeight" size="4"/》《br /》

4.浏览器窗口 的 实际宽度: 《input type="text" name="availWidth" size="4"/》《br /》《/form》《script type="text/javascript"》《!-- var winWidth = 0;var winHeight = 0;function findDimensions() 

5.//函数：获取尺寸{//获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((document.body) && (document.body.clientWidth))winWidth = document.body.clientWidth;//获取窗口高度document.form1.availHeight.value= winHeight;document.form1.availWidth.value= winWidth;}findDimensions();//调用函数，获取数值window.onresize=findDimensions;//--》《/script》《/body》《/html》

JS 获取当前浏览器宽高

JQuery获取：

console.log($(window).width()); //浏览器当前窗口可视区域宽度

console.log($(window).height()); //浏览器当前窗口可视区域高度

console.log($(document).width());//浏览器当前窗口文档对象宽度

console.log($(document).height()); //浏览器当前窗口文档的高度

console.log($(document.body).width());//浏览器当前窗口文档body的宽度

console.log($(document.body).height());//浏览器当前窗口文档body的高度

console.log($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

console.log($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

JS获取：

窗口可视区域宽度 ： document.documentElement.clientWidth || document.body.clientWidth;

窗口可视区域高度 ： document.documentElement.clientHeight || document.body.clientHeight;

窗口可视区域宽度+边线和滚动条 ： document.body.offsetWidth ;

窗口可视区域高度+边线和滚动条 ： document.body.offsetHeight ;

实际内容的宽度 ： document.body.scrollWidth;

实际内容的高度 ： document.body.scrollHeight;

滚动条下拉被卷起来的距离 ：document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

滚动条侧拉被卷起来的距离 ：document.body.scrollLeft || document.documentElement.scrollLeft ;

网页正文部分上 ：window.screenTop;

网页正文部分左 ：window.screenLeft;

元素的宽度 ：obj.offsetWidth;

元素的高度 ：obj.offsetHeight;

相对于父元素的上位移 ：obj.offsetTop;（在元素的包含元素不含滚动条的情况下）

相对于父元素的左位移 ：obj.offsetLeft;（在元素的包含元素不含滚动条的情况下）

js怎么获取微信浏览器title的高度

通过window对象来得到窗口相关的内外款高度信息，如下：
outerHeight属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。
outerWidth属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）。
innerheight 返回窗口的文档显示区的高度。
innerwidth 返回窗口的文档显示区的宽度。
在浏览器兼容方面：
所有主流浏览器都支持 outerWidth 和 outerHeight 属性。
注意：IE 8 及更早 IE 版本不支持该属性。
所有主流浏览器都支持 innerWidth 和 innerHeight 属性。
注意：IE 8 及更早 IE版本不支持这两个属性。
示例（我笔记本分辨率1366x768，浏览器全屏显示，测试）：
document.write("outerWidth: " + window.outerWidth + " outerHeight: " + window.outerHeight); // 显示：outerWidth: 1366 outerHeight: 768
document.write("innerWidth: " + window.innerWidth + " innerHeight: " + window.innerHeight); // 显示：innerWidth: 1366 innerHeight: 705