`

检测浏览器各类尺寸的页面

浏览器JavaScriptCSS工作HTML 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
    <title>Screen Size Test</title>
    <script language="JavaScript" type="text/JavaScript">
<!--
        function displayScreenSize()
        {
            var bodyWidth           =document.body.clientWidth;      //网页可见区域宽
            var bodyHeight          =document.body.clientHeight;     //网页可见区域高
            var bodyWidthWithBorder =document.body.offsetWidth;      //网页可见区域宽(包括边线的宽)
            var bodyHeightWithBorder=document.body.offsetHeight;     //网页可见区域高(包括边线的宽)
            var bodyWidthWithScroll =document.body.scrollWidth;      //网页正文全文宽
            var bodyHeightWithScroll=document.body.scrollHeight;     //网页正文全文高    
            var bodyTopHeight       =document.body.scrollTop;        //网页被卷去的上边距
            var bodyLeftWidth       =document.body.scrollLeft;       //网页被卷去的左边距
            var windowTopHeight     =window.screenTop;               //网页正文部分上边距
            var windowLeftWidth     =window.screenLeft;              //网页正文部分左边距
            var screenHeight        =window.screen.height;           //屏幕分辨率的高
            var screenWidth         =window.screen.width;            //屏幕分辨率的宽
            var screenAvailHeight   =window.screen.availHeight;      //屏幕可用工作区高度
            var screenAvailWidth    =window.screen.availWidth;       //屏幕可用工作区宽度
           
            var Str="<p>";
            Str+="网页可见区域宽:<span class='data'>"+bodyWidth+"px</span><br>";
            Str+="网页可见区域高:<span class='data'>"+bodyHeight+"px</span><br>";
            Str+="网页可见区域宽(包括边线的宽):<span class='data'>"+bodyWidthWithBorder+"px</span><br>";
            Str+="网页可见区域高(包括边线的宽):<span class='data'>"+bodyHeightWithBorder+"px</span><br>";
            Str+="网页正文全文宽:<span class='data'>"+bodyWidthWithScroll+"px</span><br>";
            Str+="网页正文全文高:<span class='data'>"+bodyHeightWithScroll+"px</span><br>";
            Str+="网页被卷去的上边距:<span class='data'>"+bodyTopHeight+"px</span><br>";
            Str+="网页被卷去的左边距:<span class='data'>"+bodyLeftWidth+"px</span><br>";
            Str+="网页正文部分上边距:<span class='data'>"+windowTopHeight+"px</span><br>";
            Str+="网页正文部分左边距:<span class='data'>"+windowLeftWidth+"px</span><br>";
            Str+="屏幕分辨率的高:<span class='data'>"+screenHeight+"px</span><br>";
            Str+="屏幕分辨率的宽:<span class='data'>"+screenWidth+"px</span><br>";
            Str+="屏幕可用工作区高度:<span class='data'>"+screenAvailHeight+"px</span><br>";
            Str+="屏幕可用工作区宽度:<span class='data'>"+screenAvailWidth+"px</span><br>";
            Str+="</p>"
            document.getElementById('dispaly').innerHTML=Str;
         }
// -->
</script>
    <style type="text/css">

<!--
A:link {}{
    text-decoration: none;
    color: #ff0000;
    font-weight: normal;
}
A:visited {}{
    text-decoration: none;
    color: #ff6666;
    font-weight: normal;
}
A:active {}{
    text-decoration: none;
    color: #ff0000;
    font-weight: normal;
}
A:hover {}{
    text-decoration: underline;
    color: #ff0000;
    font-weight: normal;
}
.title {}{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #990000;
}
.display {}{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.data {}{
    color: #FF0000;
    font-weight: bold;
}
.foot {}{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #5e5e5e;
    }
-->
   
</style>
</head><body onresize="javascript:displayScreenSize();" onload="javascript:displayScreenSize();">
<span class="title">Screen Size Test</span>
<hr align="left" size="1" noshade>
<span class="display">Now we get the screen size about this browser </span><br>
<span class="display" id="dispaly"></span>
<hr align="left" size="1" noshade>
<p align="right"><span class="foot">Screen Size Test by <a href="http://apolloge.cnblogs.com/">
apolloge</a> </span></p>
</body></html>

分享到：
| Cookie的跨域操作
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    浏览器 搜狗浏览器 搜狗浏览器 搜狗

    5. **安全防护**：搜狗浏览器内置安全防护功能，可以检测并阻止恶意网站，保护用户隐私和数据安全。 6. **个性化设置**：用户可以根据自己的喜好定制浏览器界面，如更换皮肤、调整布局、设置快捷键等，打造个性化的...

    360安全浏览器的下载方式

    访问360官方浏览器页面，你可以在首页找到“立即下载”或“最新版本下载”的按钮。点击后，系统会自动检测你的操作系统（如Windows、Mac等），并提供相应版本的下载链接。在本例中，提供的文件名为“360安全浏览器...

    谷歌chrome浏览器

    Chrome浏览器的核心在于其基于开源项目Chromium构建，这使得它具有极快的页面加载速度和出色的多任务处理能力。在安全性能上，Chrome也表现出色，内置了恶意软件检测和防护功能，确保用户在网络冲浪时免受威胁。 ...

    JavaScript安全从浏览器到服务端

    攻击者通过在Web页面中嵌入恶意脚本，当其他用户浏览此页面时，嵌入的脚本执行，从而让攻击者获取到用户浏览器中存储的敏感信息。JSON劫持也是一种常见的攻击方式，攻击者通过劫持JSON数据的回调函数，使得在数据被...

    Java script 各类特效大全

    4. 系统检测类：JavaScript可以检测用户的浏览器类型、操作系统、屏幕分辨率等信息，从而提供与用户环境相适应的功能。例如，针对不同浏览器编写兼容性代码，或者根据设备屏幕大小调整页面布局。 5. 计算检测类：...

    网御入侵检测系统V3.2.72.0用户手册

    - **更改IE直接在页面打开下载文件设置**: 调整浏览器设置以适应不同的文件下载需求。 #### 五、常用配置 **5.1 策略管理** - **策略制定**: 制定安全策略以应对不同的威胁场景。 - **策略应用**: 将策略应用于...

    一种电动汽车安全检测信息系统设计与实现.pdf

    检测标准管理模块则允许用户查询、更新和管理电动汽车的各类安全标准，确保检测依据的时效性和合规性。实时监控功能使得管理者能够迅速发现并处理潜在的安全隐患，增强了电动汽车的安全监管能力。 此外，该系统还...

    谷歌浏览器绿色版

    同时，它支持多进程架构，每个标签页都在独立的进程中运行，这样可以防止一个崩溃的页面影响其他页面的正常工作，提高了浏览器的稳定性。 对于隐私和数据管理，谷歌浏览器提供了多种设置选项。用户可以选择是否启用...

    电脑端UCWEB

    1. **网页浏览**：电脑端UCWEB支持快速打开各类网页，包括HTML5、JavaScript等现代网页技术，同时具备良好的CSS3渲染效果，确保页面展示的美观度和完整性。 2. **WAP网站访问**：针对手机WAP网站进行了特别优化，...

    网页设定工具

    2345和搜狗导航均是知名且实用的网页导航平台，它们集合了各类热门网站链接，包括新闻、娱乐、邮箱、购物、社交等多个领域，用户可以通过这些导航快速找到所需的信息和服务。 网页设定工具的主要功能包括： 1. **...

    LDAR泄漏检测与修复 电脑端 建档助手V10.0操作说明

    - **浏览器**：支持最新版本的Chrome、Firefox、Edge等主流浏览器 - **其他软件**：需安装.NET Framework 4.6.1及以上版本 #### 3. 系统功能及相关操作 本节将详细介绍LDAR建档助手的主要功能及其操作流程。 ####...

    基于Web的铁路轨道基础设施检测信息管理系统.pdf

    【基于Web的铁路轨道基础设施检测信息管理系统】是一个利用B/S（Browser/Server）模式和JSP（Java Server Pages）技术构建的动态Web应用程序，旨在解决铁路轨道基础设施检测数据的管理和分发问题。随着信息技术的...

    dede一键同步生成PC和移动端静态HTML插件.zip

    6. 同步更新：当网站内容有更改时，插件会自动检测并同步更新所有相关页面的静态版本。 标签中的“html”是指超文本标记语言，是网页制作的基础，用于描述网页结构和内容。而“软件/插件”表明这是一个辅助软件，...

    新鲜蔬菜店响应式网站模板.zip

    它通过CSS3的媒体查询（Media Queries）来检测用户的设备类型和屏幕尺寸，然后根据这些信息调整网站的布局。例如，对于大屏幕设备，可能会显示多列布局，而在小屏幕设备上，同一内容可能会堆叠成单一列以提高可读性...

    谷歌浏览器ChromeStandaloneSetup64.zip

    2. **多进程架构**：每个打开的标签页都运行在独立的进程中，防止一个页面崩溃影响到其他页面，提高了浏览器的稳定性。 3. **强大的扩展支持**：Chrome拥有丰富的扩展程序市场，用户可以通过安装各类插件来增强...

    Lodop6.046打印插件

    安装过程中，系统会自动检测兼容性，并进行必要的设置，使得插件能够与用户的浏览器环境无缝集成。 "PrintSample10.css"是一个CSS样式表文件，它包含了一系列打印样式的定义，用于控制打印页面的布局和样式。通过...

    HTML5带音乐手机摇一摇抽奖代码.zip

    此外，为了适应不同设备和浏览器的兼容性，开发者可能还需要用到Modernizr这样的库来检测浏览器对HTML5特性的支持情况，确保功能在各平台上都能正常运行。 在实际的代码结构中，可能会包含以下几个部分： 1. HTML...

    医学研究检测响应式网页模板

    "医学研究检测响应式网页模板"是专为医学研究领域设计的一种网页模板，它结合了医学的专业性与响应式的灵活性，以适应各类科研机构、医院或个人研究者的需求。 1. **响应式布局**：这种模板的关键在于其布局能够...

    CSS3媒介查询----响应式开发原始版.pptx

    **CSS3媒介查询**是实现**响应式网页设计**的核心技术之一，允许开发者根据不同的设备特性和视口尺寸调整页面的样式。响应式设计的目标是确保网页在各种屏幕大小，从移动设备到桌面电脑，都能提供优秀的用户体验。...

Magicbox
Global site tag (gtag.js) - Google Analytics