`
svft
  • 浏览: 5697 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

使用javascript获取屏幕尺寸

阅读更多

var bodyWidth =document.body.clientWidth; //网页可见区域宽
var bodyHeight =document.body.clientHeight; //网页可见区域高
var bodyWidthWithBorder =document.body.offsetWidth; //网页可见区域宽(包括边线的宽)
var bodyHeightWithBorder=document.body.offsetHeight; //网页可见区域高(包括边线的宽)
var bodyWidthWithScroll =document.body.scrollWidth; //网页正文全文宽
var bodyHeightWithScroll=document.body.scrollHeight; //网页正文全文高
var bodyTopHeight =document.body.scrollTop; //网页被卷去的上边距
var bodyLeftWidth =document.body.scrollLeft; //网页被卷去的左边距
var windowTopHeight =window.screenTop; //网页正文部分上边距
var windowLeftWidth =window.screenLeft; //网页正文部分左边距
var screenHeight =window.screen.height; //屏幕分辨率的高
var screenWidth =window.screen.width; //屏幕分辨率的宽
var screenAvailHeight =window.screen.availHeight; //屏幕可用工作区高度
var screenAvailWidth =window.screen.availWidth; //屏幕可用工作区宽度



IE与FF下共同支持与不支持的属性研究,以及取值的差异:
以下是IE新开页面屏幕计算默认值:
FF与IE都支持(计算有差异)网页可见区域宽【document.body.clientWidth】:1239
FF与IE都支持(计算有差异)网页可见区域高【document.body.clientHeight】:0
FF与IE都支持(计算有差异)网页可见区域宽【document.body.offsetWidth】:1239
FF与IE都支持(计算有差异)网页可见区域高【document.body.offsetHeight】:0
FF与IE都支持(计算有差异)网页正文全文宽【document.body.scrollWidth】:1239
FF与IE都支持(计算有差异)网页正文全文高【document.body.scrollHeight】:0
FF与IE都支持(计算相同)网页被卷去的高【document.body.scrollTop】:0
FF与IE都支持(计算相同)网页被卷去的宽【document.body.scrollLeft】:0
只支持IE:网页正文部分上【window.screenTop】:144
只支持IE:网页正文部分左【window.screenLeft】:0
FF与IE都支持(计算相同):屏幕分辨率的高【window.screen.height】:1024
FF与IE都支持(计算相同):屏幕分辨率的宽【window.screen.width】:1280
FF与IE都支持(计算相同):屏幕可用工作区高度【window.screen.availHeight】:990
FF与IE都支持(计算相同):屏幕可用工作区宽度【window.screen.availWidth】:1280
FF与IE都支持(计算有差异):窗体左【document.body.offsetLeft】与右【document.body.offsetTop】:10和15
FF与IE都支持(计算有差异):窗体高【document.body.offsetWidth】与宽【document.body.offsetHeight】:1239和0
垂直方向滚动的值【document.documentElement.scrollTop】:0
只支持FF浏览器整个宽高,不包括工具条【window.innerHeight】:undefined
FF与IE都支持(计算有差异)网页内容可视区域的高度【document.documentElement.clientHeight】:820
FF与IE都支持(计算相同):获取位于对象最顶端和窗口中可见内容的最顶端之间的距离【document.documentElement.scrollTop】:0

以下是FF新开页面屏幕计算默认值:
以下是新开页面屏幕计算默认值:
FF与IE都支持(计算有差异)网页可见区域宽【document.body.clientWidth】:1264
FF与IE都支持(计算有差异)网页可见区域高【document.body.clientHeight】:0
FF与IE都支持(计算有差异)网页可见区域宽【document.body.offsetWidth】:1264
FF与IE都支持(计算有差异)网页可见区域高【document.body.offsetHeight】:0
FF与IE都支持(计算有差异)网页正文全文宽【document.body.scrollWidth】:1264
FF与IE都支持(计算有差异)网页正文全文高【document.body.scrollHeight】:0
FF与IE都支持(计算相同)网页被卷去的高【document.body.scrollTop】:0
FF与IE都支持(计算相同)网页被卷去的宽【document.body.scrollLeft】:0
只支持IE:网页正文部分上【window.screenTop】:undefined
只支持IE:网页正文部分左【window.screenLeft】:undefined
FF与IE都支持(计算相同):屏幕分辨率的高【window.screen.height】:1024
FF与IE都支持(计算相同):屏幕分辨率的宽【window.screen.width】:1280
FF与IE都支持(计算相同):屏幕可用工作区高度【window.screen.availHeight】:990
FF与IE都支持(计算相同):屏幕可用工作区宽度【window.screen.availWidth】:1280
FF与IE都支持(计算有差异):窗体左【document.body.offsetLeft】与右【document.body.offsetTop】:0和0
FF与IE都支持(计算有差异):窗体高【document.body.offsetWidth】与宽【document.body.offsetHeight】:1264和0
垂直方向滚动的值【document.documentElement.scrollTop】:0
只支持FF浏览器整个宽高,不包括工具条【window.innerHeight】:829
FF与IE都支持(计算有差异)网页内容可视区域的高度【document.documentElement.clientHeight】:858
FF与IE都支持(计算相同):获取位于对象最顶端和窗口中可见内容的最顶端之间的距离【document.documentElement.scrollTop】:0

以上数据表明:在FF与IE下,在计算屏幕宽度时,FF比IE多 25个像素.

 

分享到:
评论

相关推荐

    JavaScript获取屏幕高度和宽度等信息

    以下将深入探讨如何使用JavaScript来获取屏幕尺寸和其他关键信息。 ### 一、获取屏幕尺寸 #### 1.1 使用`window.screen`对象 `window.screen`对象提供了访问屏幕信息的方法,包括屏幕的物理尺寸。其中,`screen....

    Javascript获取页面、屏幕尺寸大小参数.

    在JavaScript编程中,获取页面和屏幕尺寸大小是前端开发中常见的需求之一,这涉及到一系列的属性和方法,用于测量浏览器窗口、文档元素以及设备屏幕的大小。以下将详细解析如何利用JavaScript来获取这些参数,包括...

    JavaScript 获取浏览器的显示区域大小信息

    本文将详细介绍如何使用JavaScript来获取浏览器显示区域的相关尺寸信息。 #### 一、关键概念解析 在开始之前,我们先来了解几个关键的概念: - **Client Size**:表示可视区域的宽度和高度。 - **Offset Size**:...

    js获取屏幕的高度与宽度

    此外,需要注意的是,随着Web技术的发展,用户设备的多样性也日益增加,因此在使用JavaScript获取尺寸信息时,除了使用文档对象模型(DOM)属性和方法之外,还可能需要依赖于CSSOM(CSS对象模型)和HTML元素的实时...

    js获取屏幕分辨率的方法

    本文将详细介绍如何使用JavaScript来获取屏幕分辨率,并探讨这些信息如何帮助我们实现div元素的自适应窗口大小。 #### 屏幕分辨率基础知识 屏幕分辨率指的是屏幕上显示的像素数量,通常以“宽度x高度”的格式表示...

    获取手机屏幕尺寸的代码段.zip

    在Android平台上,我们可以使用Java或Kotlin来获取屏幕尺寸。在Java中,可以利用`DisplayMetrics`类: ```java DisplayMetrics displayMetrics = new DisplayMetrics(); getWindowManager().getDefaultDisplay()....

    use-screen-size:这是一个React Hook,可帮助您使用纯Javascript根据屏幕尺寸编写条件代码,获取屏幕尺寸值等

    这有助于您根据屏幕尺寸编写条件代码,或获取屏幕尺寸值 安装 npm install --save use-screen-size yarn add use-screen-size 例子 这是显示屏幕宽度,屏幕高度和当前屏幕模式的快速示例 import React from 'react' ...

    myvary#blog_articles#React Native 获取屏幕尺寸1

    获取屏幕的尺寸需要使用Dimensions,直接从node_mules中引入即可。

    javascript获取页面各种高度

    在JavaScript编程语言中,开发者经常需要获取与网页和屏幕尺寸相关的数据,比如页面的可视区域、文档的实际大小以及用户屏幕的有效工作区等信息。这些数据对于优化网站布局、响应式设计以及实现某些交互功能至关重要...

    jQuery 获取屏幕高度和宽度

    本文将详细讲解如何使用jQuery获取屏幕的高度和宽度,这对于创建响应式网页设计或者根据屏幕尺寸调整元素布局至关重要。 首先,我们需要了解什么是屏幕高度和宽度。屏幕高度是指浏览器窗口可视区域的垂直尺寸,而...

    JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码

    4. 使用JavaScript获取屏幕尺寸: - 通过window.screen.width和window.screen.height可以获取屏幕的宽度和高度,这些值通常对应逻辑分辨率。 - 通过document.documentElement.clientWidth可以获取到浏览器窗口的...

    javascript获取网页高度宽度.rar

    总结,JavaScript获取网页高度和宽度的方法多种多样,可以根据具体需求选择合适的方式。了解这些知识对于提升网页交互体验和实现动态布局至关重要。在教育领域,理解并熟练掌握这些技术可以帮助学生更好地构建动态、...

    javascript中获得屏幕中和浏览器中所有的尺寸方法

    ### JavaScript 获取屏幕尺寸 #### 屏幕宽度与高度 - **`screen.width`**:表示屏幕的宽度(以像素为单位)。这是一个只读属性,返回当前显示器的宽度。 - **`screen.height`**:表示屏幕的高度(以像素为单位)。...

    JS,Jquery获取各种屏幕的宽度和高度

    #### JavaScript获取屏幕尺寸 在原生JavaScript中,可以通过多种方法来获取屏幕的宽度和高度,具体如下: 1. **`document.body.clientWidth`** 和 **`document.body.clientHeight`**: - 这两个属性分别用于获取...

    javascript IE窗口居中

    2. 获取屏幕尺寸:接着,我们需要知道用户的屏幕分辨率,这可以通过`screen.width`和`screen.height`获取。 3. 计算偏移量:为了让窗口居中,我们需要计算出窗口的水平和垂直偏移量,即窗口宽度的一半减去屏幕宽度的...

    javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar

    本压缩包文件"javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar"包含了相关知识点的详细讲解,主要集中在JavaScript的DOM操作和窗口对象(Window)的属性与方法上。 1. **当前页面可视区域尺寸**...

    使用javascript做的动态网站

    一个优秀的JavaScript驱动的动态网站通常具备以下特点:响应式设计,能够适应不同设备的屏幕尺寸;流畅的动画效果,提供视觉上的吸引力;丰富的用户交互,如表单验证、下拉菜单、滑动切换等;以及可能利用AJAX实现无...

    javascript获取网页宽高方法汇总.docx

    本文将详细介绍几种使用 JavaScript 获取网页宽高的方法,并对比不同浏览器下的表现。 1. `document.body.clientWidth` 和 `document.body.clientHeight` 这两个属性分别返回网页可见区域的宽度和高度,不包括滚动...

    JAVASCRIPT页面效果实例

    针对不同屏幕尺寸,JavaScript可以帮助实现导航菜单的响应式变换。例如,当屏幕尺寸较小,可以将菜单按钮转换为下拉列表,这可以通过检测`window.innerWidth`来判断,并动态修改DOM元素的样式。 3. **滑动轮播图**...

Global site tag (gtag.js) - Google Analytics