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 选择器理解
Mar 16 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
$.extend 的一个小问题
Jun 18 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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 特殊字符处理函数
2008/09/05 PHP
php开发环境配置记录
2011/01/14 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
Django中对数据查询结果进行排序的方法
2015/07/17 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python OpenCV获取视频的方法
2018/02/28 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
汽车装潢店创业计划书范文
2014/02/05 职场文书
新郎接新娘保证书
2015/05/08 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书