JS获取各种浏览器窗口的大小

smile小小小宝

smile小小小宝

2016-02-20 00:38

图老师小编精心整理的JS获取各种浏览器窗口的大小希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

关于获取各种浏览器可见窗口大小的一点点研究

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

script
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
在我本地测试当中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得,很简单,很方便。
而在公司项目当中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
如果在页面中添加这行标记的话

在IE中:
document.body.clientWidth == BODY对象宽度
document.body.clientHeight == BODY对象高度
document.documentElement.clientWidth == 可见区域宽度
document.documentElement.clientHeight == 可见区域高度
在FireFox中:
document.body.clientWidth == BODY对象宽度
document.body.clientHeight == BODY对象高度
document.documentElement.clientWidth == 可见区域宽度
document.documentElement.clientHeight == 可见区域高度

在Opera中:
document.body.clientWidth == 可见区域宽度
document.body.clientHeight == 可见区域高度
document.documentElement.clientWidth == 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight == 页面对象高度(即BODY对象高度加上Margin高)
而如果没有定义W3C的标准,则
IE为:
document.documentElement.clientWidth == 0
document.documentElement.clientHeight == 0
FireFox为:
document.documentElement.clientWidth == 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight == 页面对象高度(即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth == 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight == 页面对象高度(即BODY对象高度加上Margin高)
真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

JS获取各种浏览器窗口的大小

Web开发
JS获取各种浏览器窗口的大小

可以不被浏览器拦截的弹出窗口JS代码

Web开发
可以不被浏览器拦截的弹出窗口JS代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

判断浏览器的js代码

Web开发
判断浏览器的js代码

谷歌浏览器怎么调试js

浏览器
谷歌浏览器怎么调试js

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

浏览器字体大小设置

浏览器
浏览器字体大小设置

360浏览器窗口如何合并

浏览器
360浏览器窗口如何合并

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Mac如何使用Finder访问iCloud文档

Mac如何使用Finder访问iCloud文档

JS和HTML分离:注册事件的方法进行封装

JS和HTML分离:注册事件的方法进行封装
下拉加载更多内容 ↓