javacript获取当前屏幕大小_javascript技巧

在使用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

时间: 2024-10-31 15:21:08

javacript获取当前屏幕大小_javascript技巧的相关文章

Android编程基础之获取手机屏幕大小(DisplayMetrics应用)示例_Android

本文实例讲述了Android获取手机屏幕大小的方法.分享给大家供大家参考,具体如下: 这里主要用了三个对象TextView ,Button ,以及DisplayMetrics ,其中Displaymetrics 是取得手机屏幕大小的关键类,这个例子非常的简单,当我们点击按钮,触发事件,在TextView 里显示手机屏幕的宽高分辨率. 看一下效果图: 按钮触发前: 按钮触发后: 其中我们在res->layout->values->string.xml增加了两行如下: <string

Android中获取手机屏幕大小的方法_Android

本文为大家解析Android中如何获取手机屏幕大小,提供一个解决方法,分享给大家供大家参考,具体内容如下 运行效果图: 运行程序后,当我们点击Button按钮时,可以看到下面的效果图: 具体代码: 我们可以通过使用类DisplayMetrics来获取手机屏幕的分辨率大小.DisplayMetrics类是获取手机屏幕各种属性的关键类.下面通过例子来展示如何获取手机屏幕的分辨率. 在布局文件main.xml中添加一个TextView对象,一个Button对象.其中TextView对象用来显示获得的分

Android中获取手机屏幕大小的方法

本文为大家解析Android中如何获取手机屏幕大小,提供一个解决方法,分享给大家供大家参考,具体内容如下 运行效果图: 运行程序后,当我们点击Button按钮时,可以看到下面的效果图: 具体代码: 我们可以通过使用类DisplayMetrics来获取手机屏幕的分辨率大小.DisplayMetrics类是获取手机屏幕各种属性的关键类.下面通过例子来展示如何获取手机屏幕的分辨率. 在布局文件main.xml中添加一个TextView对象,一个Button对象.其中TextView对象用来显示获得的分

Android 获取设备屏幕大小的几种方法总结

1.通过WindowManager获取 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); System.out.println("heigth : " + dm.heightPixels); System.out.println("width : " + dm.widthPixels); 2.通过Resources获取 Di

javascript如何获取android屏幕大小

问题描述 非分辨率,而是屏幕的大小,缩放不会变 问题补充:Hooopo 写道 解决方案 楼上都是用java获取.js是无法获取到真实分辨率的.window.screen.width.跟远近设置有关.改了就变了.设置user-scalable=no解决方案二:http://www.eoeandroid.com/thread-79605-1-1.html

js如何改变文章的字体大小_javascript技巧

最近发现有许多朋友提问:使用js如何改变一篇文章的字体的大小? 小编查阅了相关文章,为大家整理了几个小案例,供大家参考,具体内容如下 效果图: 点击大.小按钮,随时切换字体大小 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>使用js如果改变一篇文章字体的大小</ti

Bootstrap CSS组件之大屏幕展播_javascript技巧

在设计网页布局的时候,经常会有大屏内容的显示jumbotron 顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin). 源码中可以看出: 如果jumbotron放在container样式内,则显示圆角;如果不放在里边,则不会显示圆角. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-e

js+ajax实现获取文件大小的方法_javascript技巧

本文实例讲述了js+ajax实现获取文件大小的方法.分享给大家供大家参考,具体如下: 顾名思义,通过JS和Ajax来获取上传文件的大小,在上传之前可以有个判断,对上传的文件有所控制,因为js控制文件大小(JS获取文件大小)有些问题,具体大家试下就知道了,在此整理了一下ajax的获取文件大小的方法,比较好用,再调试过程中,出现了c:/fakepath/ 的错误,也将解决方案罗列在下面,以供大家参考 废话少说,代码如下 JS如下: <script language="Jscript"

JavaScript cookie的设置获取删除详解_javascript技巧

设置cookie 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="userId=828"; 如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如: document.cookie="userId=828; userName=hulk"; 在cookie的名或值中不能使用分号(;).逗号(,).等号(=)以及空格.在cookie的名中做到这点很容易,但要保存的值是不确定的.