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 设计模式 安全沙箱模式
Sep 24 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
自己动手制作基于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 自定义错误处理函数trigger_error()
2013/03/26 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
微信小程序签到功能
2018/10/31 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Python获取央视节目单的实现代码
2015/07/25 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
Python语言的变量认识及操作方法
2018/02/11 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
学习Django知识点分享
2019/09/11 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Django分组聚合查询实例分享
2020/04/29 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
商场消防管理制度
2014/01/12 职场文书
农村改厕实施方案
2014/03/22 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
会议欢迎词范文
2015/01/27 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
你会写请假条吗?
2019/06/26 职场文书
GO中sync包自由控制并发示例详解
2022/08/05 Golang