`
nianshi
  • 浏览: 418756 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

javascript获取各种浏览器可见窗口大小

阅读更多

 

Js代码
    function getInfo()
    {
        var s = "";
        s += " 网页可见区域宽:"+ document.body.clientWidth;
        s += " 网页可见区域高:"+ document.body.clientHeight;
        s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
        s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)";
        s += " 网页正文全文宽:"+ document.body.scrollWidth;
        s += " 网页正文全文高:"+ document.body.scrollHeight;
        s += " 网页被卷去的高(ff):"+ document.body.scrollTop;
        s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop;
        s += " 网页被卷去的左:"+ document.body.scrollLeft;
        s += " 网页正文部分上:"+ window.screenTop;
        s += " 网页正文部分左:"+ window.screenLeft;
        s += " 屏幕分辨率的高:"+ window.screen.height;
        s += " 屏幕分辨率的宽:"+ window.screen.width;
        s += " 屏幕可用工作区高度:"+ window.screen.availHeight;
        s += " 屏幕可用工作区宽度:"+ window.screen.availWidth;
        s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
        s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
        alert (s);
    }
    getInfo();
    </script>


    如果没有声明W3C标准:
    Html代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    表达式 IE FF或Opera
    document.body.clientWidth 可见区域宽度 可见区域宽度
    document.body.clientHeight 可见区域宽度 可见区域高度
    document.documentElement.clientWidth 0 页面对象宽度(即BODY对象宽度加上Margin宽)
    document.documentElement.clientHeight 0 页面对象高度(即BODY对象高度加上Margin高)


    如果声明了W3C标准:
    表达式 IE或FF Opera
    document.body.clientWidth BODY对象宽度 可见区域宽度
    document.body.clientHeight BODY对象高度 可见区域高度
    document.documentElement.clientWidth 可见区域宽度 页面对象宽度(即BODY对象宽度加上Margin宽)
    document.documentElement.clientHeight 可见区域高度 页面对象高度(即BODY对象高度加上Margin高)

    分享到:
    评论

    相关推荐

      关于获取各种浏览器可见窗口大小

      ### 关于获取各种浏览器可见窗口大小的知识点 在前端开发中,经常需要获取浏览器的可见窗口大小以及其他相关信息,以便能够根据不同的设备和浏览器环境来优化网页布局与用户体验。本文将详细解析如何通过JavaScript...

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

      ### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中,获取浏览器显示区域的大小是非常重要的一个环节,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...

      JS获取浏览器窗口大小

      ### JS 获取浏览器窗口大小 在前端开发中,经常需要获取浏览器窗口的大小,以便于根据不同的屏幕尺寸调整页面布局或实现响应式设计。本文将详细介绍如何使用JavaScript来获取浏览器窗口的宽度、高度以及相关的属性...

      JS获取浏览器窗口大小获取屏幕,浏览器,网页高度宽度[文].pdf

      在JavaScript中,获取浏览器窗口、屏幕以及网页的高度和宽度是常见的需求,这在网页布局、动态调整元素尺寸、响应式设计等方面非常有用。以下是一些关键的JavaScript属性和方法,用于获取这些信息: 1. **网页可见...

      javascript获取窗口属性值

      其中一项常见需求是获取浏览器窗口的各种属性值,比如宽度、高度等,这对于响应式设计或某些特定功能(如弹窗位置计算)非常有用。 #### 一、主要窗口属性 在提供的代码示例中,通过`getInfo`函数展示了如何获取一...

      Javascript 获取页面高度(多种浏览器)

      在网页开发中,经常需要获取浏览器的可见窗口大小,以便调整布局或执行某些基于视口尺寸的操作。本文将深入探讨如何使用 JavaScript 在不同浏览器中获取页面高度。 首先,我们有两个基本属性可以用来获取页面的宽度...

      IE与FF下javascript获取网页及窗口大小的区别详解

      在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值,下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别: [removed]function getInfo(){ var s = “”; s += ...

      javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

      scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于...

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

      在JavaScript中,获取当前页面...以上是关于“javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数”的主要知识点,通过学习和理解这些内容,开发者可以更好地控制和适应网页在不同设备和窗口大小下的表现。

      javascript获取页面各种高度

      - **window.screenTop** 和 **window.screenLeft**: 分别获取浏览器窗口相对于整个屏幕左上角的垂直和水平距离,单位为像素。 - **window.screen.height** 和 **window.screen.width**: 分别获取用户的显示器的高度...

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

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

      javascript获得网页窗口实际大小的示例代码.docx

      通过上述知识点的介绍和示例代码的分析,我们了解到JavaScript提供了多种方式来获取浏览器窗口的实际尺寸,并且通过简单的兼容性处理可以确保代码在各种浏览器中都能够稳定运行。此外,通过监听窗口的`resize`事件还...

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

      通过 `document.body.clientWidth` 和 `document.body.clientHeight`,我们可以获取到网页可见区域的宽度和高度,而通过 `window.innerWidth` 和 `window.innerHeight`,我们可以获取浏览器窗口的宽度和高度。...

      js获取浏览器宽和高http://www.tiki-toki.com/

      在JavaScript中获取浏览器的宽度和高度是Web开发中常见的需求,这主要涉及到DOM(文档对象模型)和浏览器窗口对象的知识。这篇博客“js获取浏览器宽和高”可能详细阐述了如何利用JavaScript来获取这些信息。虽然提供...

      js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

      本文将深入探讨如何使用JavaScript获取浏览器的高度、窗口高度、元素尺寸以及偏移属性。这些知识对于创建响应式网页和实现动态效果至关重要。 首先,了解如何获取浏览器的屏幕尺寸。`screen.width`和`screen.height...

      JS获取浏览器的高度和宽度

      - `window.screen.height` 和 `window.screen.width` 则提供了屏幕分辨率的高度和宽度,而不是浏览器窗口大小。 在定位元素时,还可以使用`scrollLeft`、`scrollWidth`、`clientWidth`、`offsetWidth`等属性,以及`...

      js获取浏览器高度和宽度值(多浏览器)

      在JavaScript中,获取浏览器的高度和宽度是常见的需求,用于适应不同的屏幕尺寸和实现响应式设计。然而,由于不同浏览器之间的差异,获取这些值的方法并不统一。本文将详细介绍如何在多种浏览器环境下,包括IE、Fire...

    Global site tag (gtag.js) - Google Analytics