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 30 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Python sorted对list和dict排序
2020/06/09 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
蜜蜂引路教学反思
2014/02/04 职场文书
小组合作学习反思
2014/02/18 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
超市客服工作职责
2014/06/11 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
关于长城的导游词
2015/01/30 职场文书
配置Kubernetes外网访问集群
2022/03/31 Servers