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 相关文章推荐
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 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
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Python双向循环链表实现方法分析
2018/07/30 Python
python sorted函数的小练习及解答
2019/09/18 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
财务经理岗位职责
2013/11/09 职场文书
2014学年自我鉴定
2014/02/23 职场文书
小学生新年寄语
2014/04/03 职场文书
小学生评语集锦
2014/04/18 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
养牛场项目建议书
2014/05/13 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
党风廉正建设责任书
2015/01/29 职场文书
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python