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 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
关于React Native使用axios进行网络请求的方法
Aug 02 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php中in_array函数用法分析
2014/11/15 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python3.x 将byte转成字符串的方法
2018/07/17 Python
python机器人运动范围问题的解答
2019/04/29 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
python文件和文件夹复制函数
2020/02/07 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
为什么需要版本控制
2016/10/28 面试题
生日邀请函范文
2014/01/13 职场文书
秋天的雨教学反思
2014/04/27 职场文书
新农村建设典型材料
2014/05/31 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
安全员岗位职责
2015/02/10 职场文书
高中家长意见怎么写
2015/06/03 职场文书
获奖感言范文
2015/07/31 职场文书
python实现过滤敏感词
2021/05/08 Python
vue的项目如何打包上线
2022/04/13 Vue.js