自动获取屏幕尺寸信息的html文件

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动获取屏幕尺寸信息的html文件</title>
    <style>
        #testDiv {
            width: 100%;
            height: 100vh; /* 100% of the viewport height */
            background-color: lightblue;
            text-align: center;
            font-size: 2em;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="testDiv">
        宽度: <span id="width"></span>px, 高度: <span id="height"></span>px
    </div>

    <script>
        function updateSize() {
            const div = document.getElementById('testDiv');
            const width = div.offsetWidth;
            const height = div.offsetHeight;
            document.getElementById('width').textContent = width;
            document.getElementById('height').textContent = height;
        }

        window.onload = updateSize;
        window.onresize = updateSize;
    </script>
</body>
</html>
相关推荐
灵犀学长4 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
江号软件分享13 分钟前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM20 分钟前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
慧一居士1 小时前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead1 小时前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码7 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子7 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年7 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试