三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;编辑您的代码：

<!DOCTYPE html>

<html>

<body>

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

x=document.getElementById("demo"); x.innerHTML="浏览器的内部窗口宽度：" + w + "，高度：" + h + "。"

</script>

</body>

</html>

查看结果:

浏览器的内部窗口宽度：752，高度：400。

该例显示浏览器窗口的高度和宽度：（不包括工具栏/滚动条）

时间： 2024-08-24 15:35:33

三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的相关文章

三种方法让网站背景自动适应各浏览器大小_ 转载

原地址:http://www.daimajiayuan.com/sitejs-12661-1.html 由于显示器分辨率的不同,相同的背景图片在不同分辨率下有可能会出现只显示一部分或留部分空白的情况. 实现效果:不管你怎么变化浏览器窗口大小,背景图始终会自动调节大小. 1 . 第一种: 第一个想法是需要使用一个 css 背景图,如果这张图够大,就能填充整个屏幕.当浏览器窗口大小没有图片大时,它将自动隐藏多余的部分. <head> .... <script type="text/

获得Window窗口权限的三种方法

1.第一种方法:利用视图控制器自带的View的window属性: 具体使用 self.view.window.rootViewController = ... 2.第二种方法:通过导入APPDelegate类来获取window: 具体使用 AppDelegate *app = [UIApplication sharedApplication].delegate; app.window.rootViewController = ... 3.第三种方法:通过UIApplication应用程序的主窗

用Fiddler可以设置浏览器的UA 和手动 --Chrome模拟手机浏览器（iOS/Android）的三种方法，亲测无误！

附加以一种软件的方法是:用Fiddler可以设置浏览器的UA 以下3种方法是手动的通过伪装User-Agent,将浏览器模拟成Android设备. 第一种方法:新建Chrome快捷方式右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择“复制”,复制一个图标副本到桌面.右击该副本,选择“属性”,打开相应的对话框,在“目标”文本框的字符后面添加以下语句:“--user-agent="Android"”,如下图: 注意user前面是两个“-”,并且“chrome.exe”与“--

Windows 10 应用创建模糊背景窗口的三种方法

原文 Windows 10 应用创建模糊背景窗口的三种方法现代的操作系统中创建一张图片的高斯模糊效果非常容易,不过如果要在窗口中获得模糊支持就需要操作系统的原生支持了.iOS/Mac 和 Windows 系统都对此有支持. 本文将介绍三种创建模糊背景窗口的方法.有人可能喜欢称之为毛玻璃窗口.亚克力窗口. This post is written in multiple languages. Please select yours: 最早我是在 StackOverflow 上回答一位网友的提问时

让一个元素垂直水平居中的三种方法

第一种方法: div.box{ weight:200px; height:400px;  position:absolute;  left:50%; top:50%;  margin-left:-100px; margin-top:-200px; } *兼容性好;缺点:必须知道元素的宽高 ------------- 第二种方法:

Javascript定义类（class）的三种方法

注:本文转自阮一峰,觉得此篇文章对我对大家有帮助,因此转过来. 将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越庞大的项目.Javascript代码的复杂度也直线上升.单个网页包含10000行Javascript代码,早就司空见惯.2010年,一个工程师透露,Gmail的代码长度是443000行! 编写和维护如此复杂的代码,必须使用模块化策略.目

Mac添加环境变量的三种方法

Mac添加环境变量的三种方法法一:系统级,修改/etc/paths(每一行是一个环境变量) 法二:系统级,方便管理 1.创建一个文件: sudo touch /etc/paths.d/mysql 2.用 vim 打开这个文件(如果是以 open -t 的方式打开,则不允许编辑): sudo vim /etc/paths.d/mysql 3.编辑该文件,键入路径并保存(关闭该 Terminal 窗口并重新打开一个,就能使用 mysql 命令了) /usr/local/mysql/bin

CSS实现导航条Tab切换的三种方法

前面的话 ??导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法布局 ??根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局 [语义布局] ??从语义布局的角度来看,每一个导航标题和其对应的导航内容应该是一个整体 <style> body,p{margin: 0;} h2{margin: 0;font-size:100%;} ul{margin: 0;padding: 0;li

Node.JS的表单提交及OnceIO中接受GET/POST数据的三种方法

OnceIO 是 OnceDoc 企业私有内容(文档)管理系统的底层Web框架,它可以实现模板文件.静态文件的全缓存,运行起来完全不需要I/O操作,并且支持客户端缓存优化,GZIP压缩等(只压缩一次),拥有非常好的性能,为您节约服务器成本.它的模块化功能,可以让你的Web进行分布式存储,在一个扩展包里即可包含前端.后端和数据库定义,只需通过添加/删除目录的方式就可实现功能删减,实现真正的模块化扩展.目前 OnceIO 已经开源,本文主要介绍node.js语言中的表单提交及OnceIO中接受GET