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

  • 相关阅读:
    Java单链表的实现方法汇总整理
    Java内存模型(JMM)图文并茂,条理清晰
    Java基础知识点整理(2021年最新版)
    Spring常见的77道面试题及答案(2021版)
    Python第二次学习知识点总结
    VUE学习十九,表单输入绑定v-model
    VUE学习十八,事件处理v-on
    VUE学习十七,列表渲染v-for
    VUE学习十五,Class与Style绑定
    VUE学习十四,侦听器
  • 原文地址:https://www.cnblogs.com/sink_cup/p/javascript_screen_width.html
Copyright © 2011-2022 走看看