$(window).width()/$(window).height():浏览器视口宽度/高度（单位：像素） --> 视口：指浏览器窗口的内容区域，不包括工具栏、标签栏等。
screen.width/screen.heith: 屏幕宽度/高度（单位：像素）
$(document).width()/$(document).height()： 浏览器当前窗口文档的宽度/高度（单位：像素)
$(body).width()/$(body).height()： 浏览器当前窗口文档body的宽度/高度（单位：像素)
注：jquery中
.innerHieght(): Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.(包含内边距高度）
.outerHieght():Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns a number (without “px”) representation of the value or null if called on an empty set of elements.（包含内边距，边框，外边距高度）
=======$(window).height() VS $(document).height() VS $(body).height()===========
测试代码
<!DOCTYPE html>
<html lang="zh-Hans">
<meta charset="UTF-8">
<head>
<title></title>
</head>
<body>
<div style="min-height: 400px;">
content area
</div>
<#--百度CDN公共库-->
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
/*公共库加载失败后，进行本地服务器加载*/
window.jQuery || document.write('<script src="/static/lib/jquery/jquery-2.1.1.min.js"><\/script>');
window.onresize = function(e) {
console.log($(window).height() + "--" + $(document).height() + "--" + $("body").height());
}
</script>
</body>
</html>
写道
测试一：
条件：chrome38,
操作：浏览器窗口由大到小缩放
得到数据：
649--649--400
643--643--400
642--642--400
630--630--400
620--620--400
615--615--400
611--611--400
606--606--400
600--600--400
590--590--400
581--581--400
564--564--400
555--555--400
544--544--400
448--448--400
447--447--400
446--446--400
445--445--400
444--444--400
443--443--400
437--437--400
423--423--400
410--410--400
403--403--400
400--400--400
398--400--400
394--400--400
389--400--400
383--400--400
378--400--400
368--400--400
355--400--400
341--400--400
336--400--400
331--400--400
325--400--400
测试二：
条件：chrome38
操作：浏览器窗口由小变大
得到数据：
707--707--400
696--696--400
669--669--400
643--643--400
637--637--400
631--631--400
623--623--400
612--612--400
610--610--400
606--606--400
599--599--400
589--589--400
574--574--400
565--565--400
528--528--400
522--522--400
496--496--400
482--482--400
476--476--400
468--468--400
458--458--400
424--424--400
411--411--400
402--402--400
394--400--400
384--400--400
362--400--400
356--400--400
351--400--400
348--400--400
342--400--400
341--400--400
338--400--400
324--400--400
条件：chrome38,
操作：浏览器窗口由大到小缩放
得到数据：
649--649--400
643--643--400
642--642--400
630--630--400
620--620--400
615--615--400
611--611--400
606--606--400
600--600--400
590--590--400
581--581--400
564--564--400
555--555--400
544--544--400
448--448--400
447--447--400
446--446--400
445--445--400
444--444--400
443--443--400
437--437--400
423--423--400
410--410--400
403--403--400
400--400--400
398--400--400
394--400--400
389--400--400
383--400--400
378--400--400
368--400--400
355--400--400
341--400--400
336--400--400
331--400--400
325--400--400
测试二：
条件：chrome38
操作：浏览器窗口由小变大
得到数据：
707--707--400
696--696--400
669--669--400
643--643--400
637--637--400
631--631--400
623--623--400
612--612--400
610--610--400
606--606--400
599--599--400
589--589--400
574--574--400
565--565--400
528--528--400
522--522--400
496--496--400
482--482--400
476--476--400
468--468--400
458--458--400
424--424--400
411--411--400
402--402--400
394--400--400
384--400--400
362--400--400
356--400--400
351--400--400
348--400--400
342--400--400
341--400--400
338--400--400
324--400--400
相关推荐
本篇文章将详细介绍如何使用 jQuery 获取浏览器窗口的宽度和高度，并对比不同方法的使用效果。 首先，`$(window).height()` 和 `$(window).width()` 是用来获取浏览器当前窗口可视区域的高度和宽度，也就是用户在...
### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中，获取浏览器显示区域的大小是非常重要的一个环节，这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...
在前端开发中，经常需要获取浏览器的可见窗口大小以及其他相关信息，以便能够根据不同的设备和浏览器环境来优化网页布局与用户体验。本文将详细解析如何通过JavaScript来获取不同浏览器下的窗口尺寸，并探讨一些特殊...
本文将详细介绍如何使用jQuery获取浏览器中的分辨率，并探讨相关的JavaScript方法。 首先，jQuery提供了`$(window).height()`和`$(window).width()`方法，它们分别返回浏览器当前窗口的可视区域高度和宽度。这意味...
本篇文档介绍了如何使用jQuery来获取浏览器窗口的大小，并提供了相关的代码实现。文档中提到的核心知识点包括了浏览器窗口尺寸的获取方法、jQuery库的使用以及不同浏览器的兼容性处理。 首先，文章通过一个函数...
2. **计算文本大小**：可以使用JavaScript获取元素的宽度（`element.clientWidth`）和字体大小，根据屏幕尺寸调整字体大小以保持一定的行宽。例如，可以设置一个最大和最小字体大小限制，确保在小屏幕和大屏幕上都有...
在网页设计中，为了提供更好的用户体验，经常需要根据用户的浏览器窗口大小来动态调整页面元素，尤其是图片的尺寸。本文将详细介绍如何使用jQuery实现这一功能，让图片能够自适应浏览器窗口的大小进行缩放。 首先，...
《jQuery实现父元素大小改变插件：jQuery-resize深度解析》 在Web开发中，响应式设计已经成为一种标准，使得网站能够适应不同设备的屏幕尺寸。为了实现这一目标，开发者们常常需要监听元素的尺寸变化，以便在尺寸...
同时，可能使用jQuery的`.width()`或`.height()`方法获取窗口大小，并根据窗口尺寸调整图片布局。 5. **HTML5**：在HTML结构中，我们通常会使用`<figure>`和`<figcaption>`元素来组织图片和其相关的描述，配合`...
在 jQuery 中，`.scrollTop()` 方法用于获取或设置元素的垂直滚动位置。当用户在浏览网页时滚动页面，这个方法可以追踪滚动条在垂直方向上的移动距离。如果我们在一个元素（比如窗口）上使用 `.scrollTop()`，它将...
在这个例子中，当用户点击“打印”按钮（`#printBtn`）时，`jQuery`会隐藏非打印元素（`body *:not(.print-only)`），显示仅在打印时才需要的元素（`.print-only`），并添加指向`print.css`的`<link>`标签，以应用...
总结起来，jQuery多文件上传并获取大小与格式涉及的关键知识点包括：HTML表单的`<input type="file">`元素，jQuery事件监听，File API中的`File`对象，以及文件大小和类型的处理。通过这些技术，开发者可以创建用户...
本文将详细讲解如何使用jQuery获取屏幕的高度和宽度，这对于创建响应式网页设计或者根据屏幕尺寸调整元素布局至关重要。 首先，我们需要了解什么是屏幕高度和宽度。屏幕高度是指浏览器窗口可视区域的垂直尺寸，而...
本文将详细介绍如何使用jQuery实现一个兼容各大主流浏览器（如谷歌、IE、360浏览器、火狐等）的图片预览功能。 ### 1. jQuery简介 jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画...
在JavaScript中，获取浏览器的高度和宽度是常见的需求，用于适应不同的屏幕尺寸和实现响应式设计。然而，由于不同浏览器之间的差异，获取这些值的方法并不统一。本文将详细介绍如何在多种浏览器环境下，包括IE、Fire...
获取浏览器和页面文档的宽度和高度 代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的...
在JavaScript中，获取浏览器窗口、屏幕以及网页的高度和宽度是常见的需求，这在网页布局、动态调整元素尺寸、响应式设计等方面非常有用。以下是一些关键的JavaScript属性和方法，用于获取这些信息： 1. **网页可见...
这段代码首先声明了一个变量`scaleFactor`来存储当前的缩放比例，并获取到`#zoom-image`对应的DOM元素。接着，我们使用`mousewheel`方法来监听滚轮事件。当滚轮事件发生时，我们根据滚轮的方向调整`scaleFactor`，并...
在编写响应式网站时，需要考虑到不同设备的屏幕尺寸和分辨率，通过监听窗口大小的变化并动态调整元素大小，可以使得网站的布局更加灵活，从而适应不同屏幕尺寸。 总而言之，理解如何使用JavaScript，尤其是jQuery来...
页面的可视区域高度和宽度可以通过`$(window).height()`和`$(window).width()`获取，这通常用于响应式设计或者动态调整元素大小的情况。 如果需要获取元素相对于文档的位置，可以使用`$(obj).offset()`方法。它返回...