zoukankan      html  css  js  c++  java
  • 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; 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 

  • 相关阅读:
    查询SQL数据库中表占用资源情况的语句
    修改VMware网卡MAC的方法
    Ajax 与 .net Validator
    控件属性值绑定到数据
    一个设计的小例子警察抓小偷
    加密Web.config 文件中的敏感信息
    VS .Net 2005程序集换名之后的遗留问题
    为ASP.Net 创建和配置应用程序服务数据库
    ArcGIS 9.0 在Windows XP SP2 上安装的问题(数据保护造成的)
    使用客户端脚本
  • 原文地址:https://www.cnblogs.com/archrjoe/p/3615419.html
Copyright © 2011-2022 走看看