蓝戒博客

  • 首页
  • 研发说
  • 架构论
  • 效能录
  • AI谈
  • 随笔集
智构苍穹
融合 AI、架构与工程实践,沉淀方法论,构建可持续的技术价值。
  1. 首页
  2. 研发说
  3. 正文

JS 获取浏览器窗口大小全解

2015年10月13日 5468点热度 0人点赞 0条评论

如果要在浏览器上显示东西 用 document.documentElement.clientHeight ,document.documentElement.clientWidth
或者 document.body.clientWidth document.body.clientHeight
这代表着网页可用区域.
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
你的屏幕设置是(*)位彩色:window.screen.colorDepth
你的屏幕设置是(*)像素/英寸:window.screen.deviceXDPI

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高)

参考文档:
百度知道:http://www.cnblogs.com/henw/archive/2011/12/19/2293585.html
痕网-henw:http://www.cnblogs.com/henw/archive/2011/12/19/2293585.html

标签: javascript
最后更新:2025年9月13日

cywcd

我始终相信,技术不仅是解决问题的工具,更是推动思维进化和创造价值的方式。从研发到架构,追求极致效能;在随笔中沉淀思考,于 AI 中对话未来。

打赏 点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

cywcd

我始终相信,技术不仅是解决问题的工具,更是推动思维进化和创造价值的方式。从研发到架构,追求极致效能;在随笔中沉淀思考,于 AI 中对话未来。

最新 热点 随机
最新 热点 随机
狂揽 32 万 Star,让 AI 智能体帮你“逆向一切”:深度拆解 GitHub 现象级神器 morluto/rea 与 6 大最佳实践 OpenCode 曝 1.4% 用户密钥失窃,揭秘黑客“对抗性蒸馏”黑产! Claude 全面开放 OTel 追踪、Cohere 鲸吞 500 漏洞猎手:AI 智能体彻底告别“黑盒裸奔”! 不用显卡、普通 CPU 140 毫秒出结果!Mistral 突发开源 209M 时序模型 Timestral,横扫三大权威榜单 Meta Muse 被“开源复刻”?深度拆解 5000 星 OpenMuse:架构很香,但这 3 个暗坑必须看清 智谱 GLM-Legal 反超 Claude 与 Kimi:18B 激活参数凭什么啃下最严苛法律评测?
不讲废话的 AI 估值 2 亿美元!全面拆解“系统一”决策模型 Jev:70ms 极速响应与工业级实战白嫖 10 亿 Token 与云端虚拟机!Meta Muse 国内成功注册保姆级指南:手把手教你跳过排队宿敌破天荒联手!OpenAI 与 Anthropic 互相“查水表”,Google 证实 Agent 越狱渗透:AI 正在失控边缘?波及 13.4 万智能体!首个零点击 RCE 漏洞 Plugin4Shell 爆发:你锁定的插件正在偷偷黑掉你的电脑阿里开源 OpenCodeReview:给大模型套上“工程缰绳”的代码审查神器大模型集体打骨折,扎克伯格把 AI 挂上钥匙扣:科技巨头们到底在琢磨什么?
强大的前端加密/解密js库crypto-js使用解析 微前端实现方案分享:主流框架对比分析 Workbox:可直接用于生产环境的 Service Worker 利器 js判断浏览器类型并区分IE不同版本 我让豆包Doubao-Seed-Evolving模拟一次火箭发射,19分42秒后,长征八号甲真在网页里“上天”了 create-react-app创建react项目踩坑总结
最近评论
cywcd 发布于 4 周前(09月22日) 《牛来跑酷》游戏链接地址已更新: 1. Gemini 3.7 Flash 版 牛来跑酷: htt...
渔夫 发布于 12 个月前(11月05日) 学到了,感谢博主分享
沙拉小王子 发布于 9 年前(11月30日) 适合vue入门者学习,赞一个
沙拉小王子 发布于 9 年前(11月30日) 适合vue入门者学习,赞一个
cywcd 发布于 10 年前(04月27日) 请参考一下这篇文章http://www.jianshu.com/p/fa4460e75cd8

COPYRIGHT © 2025 蓝戒博客_智构苍穹-专注于大前端领域技术生态. ALL RIGHTS RESERVED.

京ICP备12026697号-2