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 

  • 相关阅读:
    nextSibling VS nextElementSibling
    线程实现连续启动停,并在某一时间段内运行
    线程:安全终止与重启
    监控知识体系
    后台服务变慢解决方案
    Java泛型类型擦除以及类型擦除带来的问题
    常见的 CSRF、XSS、sql注入、DDOS流量攻击
    Spring对象类型——单例和多例
    一次线上OOM过程的排查
    深入浅出理解基于 Kafka 和 ZooKeeper 的分布式消息队列
  • 原文地址:https://www.cnblogs.com/archrjoe/p/3615419.html
Copyright © 2011-2022 走看看