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匀速运动演示示例代码
Nov 26 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
自己动手制作基于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
PHP5中MVC结构学习
2006/10/09 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
php集成开发环境详解
2019/09/24 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
大学新生军训个人的自我评价
2013/10/03 职场文书
办理暂住证介绍信
2014/01/11 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
毕业寄语大全
2014/04/09 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
公司辞职信模板
2015/05/13 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL