JS关于浏览器尺寸的方法
document.body.clientWidth BODY对象宽度。通配符未清零margin的时候,小于页面可见区域宽度
document.body.clientHeight BODY对象高度。
document.documentElement.clientWidth 可见区域宽度
document.documentElement.clientHeight 可见区域高度
document.body.scrollWidth 网页正文全文宽
document.body.scrollHeight 网页正文全文高
document.body.scrollTop 网页被卷去的高//未用过
document.body.scrollLeft 网页被卷去的左//未用过
window.screenTop 网页正文部分上//未用过
window.screenLeft 网页正文部分左//未用过
window.screen.width 屏幕分辨率的宽
window.screen.height 屏幕分辨率的高
window.screen.availWidth 屏幕可用工作区宽度
window.screen.availHeight 屏幕可用工作区高度(含浏览器框架的高度)
e.g.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; maximum-scale=1.0;" />
<style>
*{ margin:0; padding:0; line-height:20px; width:1000px; height:1000px;}
</style>
</head>
<body>
1
<script>
window.onload = function(){document.write('BODY对象宽度'+document.body.clientWidth+'<br />'+
'BODY对象高度'+document.body.clientHeight+'<br />'+
'可见区域宽度'+document.documentElement.clientWidth+'<br />'+
'可见区域高度'+document.documentElement.clientHeight+'<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.availWidth+'<br />'+
'屏幕可用工作区高度'+window.screen.availHeight
)}
</script>
</body>
</html>
pc chrome
BODY对象宽度1000
BODY对象高度1000
可见区域宽度1425
可见区域高度392
网页正文全文宽1425
网页正文全文高1000
网页被卷去的高0
网页被卷去的左0
网页正文部分上0
网页正文部分左0
屏幕分辨率的宽900
屏幕分辨率的高1440
屏幕可用工作区宽度1440
屏幕可用工作区高度860
ios chrome
BODY对象宽度1000
BODY对象高度1000
可见区域宽度320
可见区域高度416
网页正文全文宽1000
网页正文全文高1000
网页被卷去的高0
网页被卷去的左0
网页正文部分上0
网页正文部分左0
屏幕分辨率的宽480
屏幕分辨率的高320
屏幕可用工作区宽度320
屏幕可用工作区高度460
JS关于浏览器尺寸的方法的更多相关文章
- 关于通过JS识别浏览器类型的方法
JS检测浏览器类型的方法 网络上一般采用navigator.userAgent判断浏览器标识的办法,但是有个麻烦的问题是IE11不断升级之后,IE11的userAgent变成: "Moz ...
- JS判断浏览器类型的方法总结(IE firefox chrome opera safari)
JS判断浏览器类型的方法总结,可判别当前客户端所使用的浏览器是ie,firefox,safari,chrome或者是opera,另外js可以精确判断到ie浏览器的版本,依然直接上代码,需要的朋友可按照 ...
- js 让浏览器全屏模式的方法launchFullscreen
浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀 // 判断各种浏览器,找到正确的方法 function launchFullscreen(element) ...
- js获取浏览器尺寸
Javascript: alert(document.body.clientWidth); //网页可见区域宽(body) alert(document.body.clientHeigh ...
- Js解析浏览器路径的方法
方法如下:function parseURL(url) { var a = document.createElement('a'); //创建一个链接 a.href = url; return { s ...
- js禁止浏览器滚屏方法
在有些需求中需要对页面进行限制页面的查看权限,阻止用户滚动浏览器.那么我们就要禁止鼠标的滚动事件,并且如果浏览器的滚动事件一旦触发我们就将滚动条重置为0就可以了.以下是具体代码: //出现滚动值立马归 ...
- JS清除IE浏览器缓存的方法
js中自动清除ie缓存方法 — 常用 对于动态文件,比如 index.asp?id=... 或者 index.aspx?id=... 相信有经验的程序员都知道怎样禁止浏览器缓存数据了.但是对于静态文件 ...
- jquery和js检测浏览器窗口尺寸和分辨率
jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...
- JS打开新窗口防止被浏览器阻止的方法
这篇文章主要介绍了JS打开新窗口防止被浏览器阻止的方法,分析对比了常用方法与改进方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考. ...
随机推荐
- Open War I: 野王复活与视野,望远镜视野,近距离射击,远程狙击
Below demos For: 1- 野王复活与视野,近距离射击. 2- 野王视野之外,无法近距离射击,实现望远镜视野, 远程狙击 Share the source codes with your ...
- select使用实例——str_cli函数(修订版)
我们可以使用select函数重写http://www.cnblogs.com/nufangrensheng/p/3587962.html中的str_cli函数,这样服务器进程一终止,客户就能马上得到通 ...
- Decorator Pattern (装饰者模式)
装饰者模式( Decorator Pattern ) 意图 : 动态的给一个对象添加一些额外的功能,IO这块内容体现出了装饰模式,Decorator模式相比生成子类更为灵活. 角色 : 1)抽象构件角 ...
- OpenERP登录页面调整
在OpenERP的登录页面中,有针对数据库管理的链接,为了安全起见,一般都会通过修改原始的XML来实现隐藏的目的.但这样每次重新安装以后,都要重新修改,很不方便,所以我们可以通过建立一个新模块的方式来 ...
- 将web容器置于OSGi框架下进行web应用的开发
将web容器置于OSGi框架下,其实就是将web容器做成OSGi支持的Bundle,再安装到OSGi框架中,这里使用的是Jetty容器. 1.创建一个Eclipse插件项目,在此插件下创建一个WebR ...
- ubuntu截图工具
ubuntu截图工具 首先,我们用apt-get install 去安装一个,scrot 主要用在命令行下,它使用 imlib2 库来抓取并保存图像 sudo a ...
- webqq协议分析之~~~~验证是否需要验证码
对于小黄鸡我想大家(喜欢在群里bb的人...)肯定一点都不陌生,那段时间大家在群里对小鸡是各种调戏啊,都有点不忍直视.那时我便想能不能自己也做个呢,后来想想还是算了吧,自己技术太渣渣,然后就不了了之. ...
- android绝对布局
绝对布局由AbsoluteLayout代表.绝对布局就像java AWT编程中的空布局,就是Android不提供任何布局控制而是由开发人员自己通过X坐标.Y坐标来控制组件的位置.当使用Absolute ...
- mosquitto ---SSL/TLS 单向认证+双向认证
生成证书 # * Redistributions in binary form must reproduce the above copyright # notice, this list of ...
- 3dmax fx shader, vertex color
美术那边需要一个能在3dmax里用的支持diffuse纹理和顶点色的additive shader(不带光照). 以前没搞过这个,于是从3dmax自带的vertexcolor.fx,DiffuseBu ...