`
liuguofeng
  • 浏览: 448783 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

窗口大小 window.innerWidth 、window.innerHeight、document.documentElement.clientWidth、

 
阅读更多
/ Firefox、Chrome、Safari、Opera 支持 ; window.innerWidth 没有减去右边下拉条
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
 
//IE、Firefox、Chrome、Safari、Opera 支持 ;
if(typeof pageWidth != 'number')
{
// CSS1Compat:标准兼容模式开启。
if(document.compatMode == 'CSS1Compat'){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
// BackCompat:标准兼容模式关闭。
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
 
 
 
 
// IE、Firefox、Chrome、Safari、Opera 支持 ,
   // document.documentElement.clientWidth 减去右边下拉条。
// CSS1Compat:标准兼容模式开启。
if(document.compatMode == 'CSS1Compat'){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
// BackCompat:标准兼容模式关闭。
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
分享到:
评论

相关推荐

    取得窗口大小 兼容所有浏览器的js代码.docx

    综上所述,为了在所有浏览器中准确地获取窗口大小和位置,我们需要对`window.innerWidth`、`window.innerHeight`、`window.screenLeft`以及`window.screenTop`等属性进行兼容性处理。这样的代码能够确保在不同浏览器...

    获取页面长宽和滚动条的位置

    winW = document.documentElement.clientWidth; winH = document.documentElement.clientHeight; } else if (document.body) { // other winW = document.body.clientWidth; winH = document.body...

    javascript窗口宽高,鼠标位置,滚动高度(详细解析).docx

    - 使用 `window.innerWidth` 和 `window.innerHeight` 获取窗口的宽高。 - 通过检测 `document.body.clientWidth` 和 `document.body.clientHeight` 来获取宽度和高度。 - 通过检查 `document.documentElement....

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

    JavaScript 提供了多种方法来获取浏览器窗口的尺寸,包括`window.innerWidth`、`window.innerHeight`以及`document.documentElement.clientWidth`等属性。 #### 二、核心知识点详解 ##### 1. 窗口尺寸获取方法 在...

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

    var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); ``` 此外,...

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

    - 使用 `window.innerWidth` 和 `window.innerHeight` 来获取浏览器窗口的可视区域尺寸,这两个属性在现代浏览器中都得到了很好的支持。 - 在处理旧版浏览器或兼容性问题时,可以使用 `document.documentElement....

    js获取屏幕分辨率的方法

    这可以通过`window.innerWidth`和`window.innerHeight`或`document.documentElement.clientWidth`和`document.documentElement.clientHeight`来实现。 ```javascript // 获取浏览器窗口的宽度 var windowWidth = ...

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

    对于W3C的标准,`document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 应该返回浏览器窗口的可视区域大小,但不同浏览器的实现有所差异。在没有定义标准的情况下,IE返回0,而Fire...

    js获取网页宽高

    - `window.innerWidth` 和 `window.innerHeight` 属性可以分别获取浏览器窗口的宽度和高度,不包括滚动条。这两个属性能够反映用户当前视口的大小。 - 如果需要包含滚动条的尺寸,可以使用 `document....

    【JavaScript源代码】JavaScript获取网页的宽高及如何兼容详解.docx

    // 支持 window.innerWidth 和 window.innerHeight 的浏览器 width = window.innerWidth; height = window.innerHeight; } else if (document.compatMode === "BackCompat") { // 怪异模式 width = document....

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

    `window.innerHeight` 和 `window.innerWidth` 是针对现代浏览器的解决方案,当其他方法失效时,它们通常能提供正确的值。 总之,获取页面高度和宽度是 JavaScript 开发中的常见任务,但需要注意浏览器的兼容性和...

    javascript经典特效---显示页面窗口参数.rar

    1. **宽度和高度**:`window.innerWidth` 和 `window.innerHeight` 分别返回浏览器窗口的可视区域宽度和高度,不包括滚动条。而`document.documentElement.clientWidth` 和 `document.documentElement.clientHeight`...

    js获取浏览器高度和宽度值.pdf

    - `window.innerWidth` 和 `window.innerHeight`: 这两个属性在现代浏览器中广泛支持,它们分别返回浏览器窗口的可视区域宽度和高度,包括垂直滚动条(如果存在的话)。 3. **滚动位置和全文尺寸** - `document....

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

    - `document.documentElement.clientHeight` 和 `document.documentElement.clientWidth`:IE6 Strict模式下使用。 - `document.body.clientHeight` 和 `document.body.clientWidth`:其他IE版本和其他浏览器使用。 ...

    取得窗口大小 兼容所有浏览器的js代码

    取得窗口大小的代码: 代码如下: var pageWidth = window.innerWidth, var pageHeight = window.innerHeight; if(typeof pageWidth != “number”){ if(document.compatMode == “number”){ pageWidth = document....

    详解JavaScript编程中的window与window.screen对象

    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; ``` ...

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

    如果你想获取浏览器窗口不包含滚动条的宽度和高度,可以使用`document.documentElement.clientWidth`和`document.documentElement.clientHeight`。这两个属性会忽略滚动条,只返回视口的大小。 5. **页面加载事件*...

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

    windowHeight = document.documentElement.clientHeight; } else if (document.body) { windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the ...

    浅谈JavaScript的innerWidth与innerHeight

    这段代码首先检查`window.innerWidth`和`window.innerHeight`是否可用,如果不支持,则根据浏览器的兼容模式(CSS1Compat表示标准模式)来获取文档元素或body元素的clientWidth和clientHeight,从而得到类似的效果。...

Global site tag (gtag.js) - Google Analytics