关于获取各种浏览器可见窗口大小的一点点研究
<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高)
真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。
分享到:
相关推荐
关于获取各种浏览器可见窗口大小,各种各样的窗口大小,也有一些讲解,非常适合当做工具书收藏起来,各位看官千万不要错过哦。
关于获取各种浏览器可见窗口大小的一点点研究。使用javascript轻松实现日常需要的功能。
在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值,下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别: [removed]function getInfo(){ var s = “”; s += ...
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于...
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...
一:网页可见区域宽高,不包括工具栏和滚动条(浏览器窗口可视区域大小) 1.对于IE9+、chrome、firefox、Opera、Safari: window.innerHeight浏览器窗口的内部高度; window.innerWidth浏览器窗口的内部宽度; 2....
例如,当可见滚动条时,WebKit浏览器会更改其CSS视口的大小,而其他大多数浏览器则不会。 由于window.innerWidth不管滚动条状态如何都保持不变,因此不是与Chrome或Safari一起使用的好选择。 此外,Internet ...
熟练掌握window对象的status、location、name、self、opener属性的使用 Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY、FRAMESET或FRAME元素时,...
15. 如何使窗口不可见? 16. 如何使窗口始终在最前方? 17、如何创建一个字回绕的CEditView 18、通用控件的显示窗口 19、移动窗口 20、重置窗口的大小 21、如何单击除了窗口标题栏以外的区域使窗口移动 22、如何改变...
Viewport不局限于浏览器可视区域的大小,可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。 媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 ...
参数 是否后台, 逻辑型, 可空, 默认为假:可见到的颜色点 真:后台窗口内颜色点 .参数 色深, 整数型, 可空, 所截取的图片位深度,默认为16位(8,16,24,32) .子程序 超级延迟, , 公开, 无资源占用的延时(无返回值) .参数...
学习单2 制作不可移动的窗体 学习单3 制作非矩形的窗体 学习单4 制作不可见的窗体 学习单5 移动无标题栏窗口 学习单6 制作始终位于最上层的窗体 学习单7 在系统菜单中添加自定义菜单项 学习单8 将窗体大小限定在一定...
请记住,一旦在布局模式下更改按钮的位置,该按钮将在调整浏览器大小时,该按钮将不再相对于窗口边框移动,因此您必须为布局维护相同的浏览器窗口大小,以查看一致。如果您创建布局,则缩小浏览器,可以丢失可见区域...
facebook-rockin最佳自动化Selenium消除无api工具的机器人机器做... 浏览器的窗口预期宽度为1000像素,高度至少为1000像素,缩放比例为100%。 大小不同时,页面外观会有所不同,因此漫游器可能无法正常工作。 因为机
1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 提示文本的隐藏与显示 1.23 实现文字闪烁效果 1.24 实现文字动画...
与其他类似的扩展名相反,在关闭抓取器窗口时,此扩展名对浏览器性能的影响为零。仅在打开采集卡窗口并且工具栏区域中有“ R”徽章通知时,才监视网络资源 ----请注意,Bulk Media Downloader对您下载的媒体内容概不...
-修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件(比如Panel,Region,Tab等)增加AJAX...
实例038 没有标题栏但可以改变大小的窗口 48 1.11 设置窗体位置 49 实例039 不可移动的窗体 49 实例040 设置窗体在屏幕中的位置 50 实例041 始终在最上面的窗体 51 1.12 设置窗体大小 52 实例042 限制...
3.6 使用对象浏览器 67 3.7 总结 68 3.8 问与答 68 3.9 作业 69 3.9.1 测试 69 3.9.2 答案 69 3.9.3 练习 69 第四章 理解事件 70 4.1 理解事件驱动的编程 70 4.1.1 触发事件 71 4.1.2 避免递归事件 72 ...