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 

  • 相关阅读:
    [jQuery学习系列六]6-jQuery实际操作小案例
    [Java拾遗一] XML的书写规范与解析.
    [数据库操作]Java中的JDBC的使用方法.
    [Java拾遗二]Tomact及Http 部分总结.
    [Java拾遗三]JavaWeb基础之Servlet
    [Java拾遗四]JavaWeb基础之Servlet_Request&&Response
    [Java拾遗五]使用Session防止表单重复提交
    [数据库连接池] Java数据库连接池--DBCP浅析.
    [开发工具]Java开发常用的在线工具
    [数据库连接池二]Java数据库连接池--C3P0和JDNI.
  • 原文地址:https://www.cnblogs.com/archrjoe/p/3615419.html
Copyright © 2011-2022 走看看