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函数
Oct 16 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 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高级对象构建 工厂模式的使用
2012/02/05 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
python梯度下降算法的实现
2020/02/24 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
利用python实现汉诺塔游戏
2021/03/01 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
班组长工作职责
2013/12/25 职场文书
毕业生自荐书
2014/02/03 职场文书
高三学生评语大全
2014/04/25 职场文书
商品陈列协议书
2014/09/29 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL