javacript获取当前屏幕大小


Posted in Javascript onJune 04, 2016

在使用html5在android下做开发的时候,要获取屏幕实际的大小,直接上代码,可以通过如下代码测试。

<html>

<script>

function a(){

document.write(

"屏幕分辨率为:"+screen.width+"*"+screen.height

+"<br />"+

"屏幕可用大小:"+screen.availWidth+"*"+screen.availHeight

+"<br />"+

"网页可见区域宽:"+document.body.clientWidth

+"<br />"+

"网页可见区域高:"+document.body.clientHeight

+"<br />"+

"网页可见区域宽(包括边线的宽):"+document.body.offsetWidth

+"<br />"+

"网页可见区域高(包括边线的宽):"+document.body.offsetHeight

+"<br />"+

"网页正文全文宽:"+document.body.scrollWidth

+"<br />"+

"网页正文全文高:"+document.body.scrollHeight

+"<br />"+

"网页被卷去的高:"+document.body.scrollTop

+"<br />"+

"网页被卷去的左:"+document.body.scrollLeft

+"<br />"+

"网页正文部分上:"+window.screenTop

+"<br />"+

"网页正文部分左:"+window.screenLeft

+"<br />"+

"屏幕分辨率的高:"+window.screen.height

+"<br />"+

"屏幕分辨率的宽:"+window.screen.width

+"<br />"+

"屏幕可用工作区高度:"+window.screen.availHeight

+"<br />"+

"屏幕可用工作区宽度:"+window.screen.availWidth

);

}

</script>

<body onload="a()" >

</body>

</html>

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:

IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5:

clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽: 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

以上就是使用javacript获取当前屏幕大小的全部内容,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js的逻辑运算符 ||
May 31 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 #Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 #Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 #Javascript
js不间断滚动的简单实现
Jun 03 #Javascript
Ionic如何创建APP项目
Jun 03 #Javascript
Ionic快速安装教程
Jun 03 #Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 #Javascript
You might like
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
php生成图片验证码的方法
2016/04/15 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
应届生求职信
2014/05/31 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
应收账款管理制度
2015/08/06 职场文书