zoukankan      html  css  js  c++  java
  • JS 获取浏览器窗口大小

    转载:JS 获取浏览器窗口大小

    摘录如下:

    常用:

    JS 获取浏览器窗口大小

    // 获取窗口宽度
    if (window.innerWidth)
    winWidth = window.innerWidth;
    else if ((document.body) && (document.body.clientWidth))
    winWidth = document.body.clientWidth;
    // 获取窗口高度
    if (window.innerHeight)
    winHeight = window.innerHeight;
    else if ((document.body) && (document.body.clientHeight))
    winHeight = document.body.clientHeight;
    // 通过深入 Document 内部对 body 进行检测,获取窗口大小
    if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
    {
    winHeight = document.documentElement.clientHeight;
    winWidth = document.documentElement.clientWidth;
    }
    

    详细:

    关于获取各种浏览器可见窗口大小: 
    <script> 
    function getInfo() 

    var s = ""; 
    s = " 网页可见区域宽:" document.body.clientWidth; 
    s = " 网页可见区域高:" document.body.clientHeight; 
    s = " 网页可见区域宽:" document.body.offsetWidth " (包括边线和滚动条的宽)"; 
    s = " 网页可见区域高:" document.body.offsetHeight " (包括边线的宽)"; 
    s = " 网页正文全文宽:" document.body.scrollWidth; 
    s = " 网页正文全文高:" document.body.scrollHeight; 
    s = " 网页被卷去的高(ff):" document.body.scrollTop; 
    s = " 网页被卷去的高(ie):" document.documentElement.scrollTop; 
    s = " 网页被卷去的左:" document.body.scrollLeft; 
    s = " 网页正文部分上:" window.screenTop; 
    s = " 网页正文部分左:" window.screenLeft; 
    s = " 屏幕分辨率的高:" window.screen.height; 
    s = " 屏幕分辨率的宽:" window.screen.width; 
    s = " 屏幕可用工作区高度:" window.screen.availHeight; 
    s = " 屏幕可用工作区宽度:" window.screen.availWidth;

    s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色"; 
    s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸"; 
    //alert (s); 

    getInfo(); 
    </script> 
    在我本地测试当中: 
    在IE、FireFox、Opera下都可以使用 
    document.body.clientWidth 
    document.body.clientHeight 
    即可获得,很简单,很方便。 
    而在公司项目当中: 
    Opera仍然使用 
    document.body.clientWidth 
    document.body.clientHeight 
    可是IE和FireFox则使用 
    document.documentElement.clientWidth 
    document.documentElement.clientHeight 
    原来是W3C的标准在作怪啊 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    如果在页面中添加这行标记的话 在IE中: 
    document.body.clientWidth ==> BODY对象宽度 
    document.body.clientHeight ==> BODY对象高度 
    document.documentElement.clientWidth ==> 可见区域宽度 
    document.documentElement.clientHeight ==> 可见区域高度 
    在FireFox中: 
    document.body.clientWidth ==> BODY对象宽度 
    document.body.clientHeight ==> BODY对象高度 
    document.documentElement.clientWidth ==> 可见区域宽度 
    document.documentElement.clientHeight ==> 可见区域高度 

    在Opera中: 
    document.body.clientWidth ==> 可见区域宽度 
    document.body.clientHeight ==> 可见区域高度 
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) 
    document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 
    而如果没有定义W3C的标准,则 
    IE为: 
    document.documentElement.clientWidth ==> 0 
    document.documentElement.clientHeight ==> 0 
    FireFox为: 
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 
    Opera为: 
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

  • 相关阅读:
    Javascript之让图片固定在一个位置
    Android之AIDL实现Demo
    android listview 上下边缘的模糊去掉
    Android中Application设置全局变量以及传值
    Android之在Bitmap上涂鸦效果
    Android之TabHost重定义
    Android数据库升级实例,已更新
    Android之更新ListView,位置置顶的问题
    Android之Parcelable使用
    Asp.Net 2.0 防盗下载文件·············
  • 原文地址:https://www.cnblogs.com/senyier/p/7306579.html
Copyright © 2011-2022 走看看