zoukankan      html  css  js  c++  java
  • Javascript 检测分辨率 在各个浏览器下结果截图

    Javascript 能获得分辨率以及各种高度宽度,在Firefox、IE、Chrome浏览器下结果不相同。

    总结:屏幕分辨率是可靠的,用window.screen.height + ‘x’ + window.screen.width。

    滚动条滚了多少,只有chrome知道。

    网页高度是可靠的,用document.body.scrollHeight。

    网页宽度不能用document.body.scrollWidth。

    浏览器有多宽,IE6不知道,其他浏览器知道。

    浏览器有多高,都不知道。

    还有一点,IE、Firefox整体放大是模拟小分辨率,1600x900放大125%,js检测到为1280x720。也就是说流量统计中的IE、Firefox分辨率不再可靠。Chrome整体放大后分辨率依然可靠。

    在线效果:http://web-developer-tips.appspot.com/javascript_screen_width/

    代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
        <title>javascript 显示器分辨率</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
        body
        {
            margin:0;
            padding:0;
        }
        </style>
    </head>
    <body>
    <div style="3000px;height:2000px;">
    <h1>javascript 显示器分辨率</h1>
    <div style="position:fixed;left:20px;top:50px;background:#FFCC00;" id="content">


    </div>
    </div>
    <script type="text/javascript">
    //<![CDATA[
    //var font_size = screen.width / 64 + 'px';
    //document.body.style.fontSize = font_size;
    //var p = document.createElement("p");
    //p.innerHTML = "分辨率" + screen.width + 'x' + screen.height;
    //alert("分辨率" + screen.width + 'x' + screen.height);
    function showWidth()
    {
        var     s   =   " ";
        s   +=   "<p>网页可见区域宽: "+   document.documentElement.clientWidth;
        s   +=   "</p><p>网页可见区域高: "+   document.documentElement.clientHeight;
        s   +=   "</p><p>网页可见区域宽: "+   document.body.offsetWidth     + "   (包括边线和滚动条的宽) ";
        s   +=   "</p><p>网页可见区域高: "+   document.body.offsetHeight   + "   (包括边线的宽) ";
        s   +=   "</p><p>网页正文全文宽: "+   document.body.scrollWidth;
        s   +=   "</p><p>网页正文全文高: "+   document.body.scrollHeight;
        s   +=   "</p><p>网页被卷去的高: "+   document.body.scrollTop;
        s   +=   "</p><p>网页被卷去的左: "+   document.body.scrollLeft;
        s   +=   "</p><p>网页正文部分上: "+   window.screenTop;
        s   +=   "</p><p>网页正文部分左: "+   window.screenLeft;
        s   +=   "</p><p>屏幕分辨率的高: "+   window.screen.height;
        s   +=   "</p><p>屏幕分辨率的宽: "+   window.screen.width;
        s   +=   "</p><p>屏幕可用工作区高度: "+   window.screen.availHeight;
        s   +=   "</p><p>屏幕可用工作区宽度: "+   window.screen.availWidth;
        s   +=   "</p><p>你的屏幕设置是   "+   window.screen.colorDepth   + "   位彩色 ";
        s   +=   "</p><p>你的屏幕设置   "+   window.screen.deviceXDPI   + "   像素/英寸 </p>";
        document.getElementById('content').innerHTML = s;
    }
    window.onload = function()
    {
        showWidth();
    }
    window.onresize = function()
    {
        showWidth();
    }
    window.onscroll = function()
    {
        showWidth();
    }
    //]]>
    </script>
    </body>
    </html>

    截图:

    asdf

  • 相关阅读:
    当Django模型迁移时,报No migrations to apply 问题时
    django--各个文件的含义
    django--创建项目
    1013. Battle Over Cities (25)
    1011. World Cup Betting (20)
    1009. Product of Polynomials (25)
    1007. Maximum Subsequence Sum (25)
    1006. Sign In and Sign Out (25)
    1008. Elevator (20)
    1004. Counting Leaves (30)
  • 原文地址:https://www.cnblogs.com/sink_cup/p/javascript_screen_width.html
Copyright © 2011-2022 走看看