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 trim去空格的最佳实践
Oct 30 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
学习jQuey中的return false
Dec 18 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
纯js实现动态时间显示
Sep 07 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
自己动手制作基于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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
PHP防止跨域提交表单
2013/11/01 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
微信支付开发维权通知实例
2016/07/12 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
28个JS验证函数收集
2010/03/02 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
如何高效使用Python字典的方法详解
2017/08/31 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
Python用SSH连接到网络设备
2021/02/18 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
营业经理岗位职责
2013/11/10 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
公司股权转让协议书
2014/04/12 职场文书
篮球比赛口号
2014/06/10 职场文书
质量管理标语
2014/06/12 职场文书
写得不错的求职信范文
2014/07/11 职场文书
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android