可通过CSS transform、zoom属性、meta viewport、JavaScript动态控制及CSS自定义属性五种方式调整HTML页面缩放：transform最通用且兼容性好；zoom仅部分浏览器支持；viewport专用于移动端；JavaScript实现交互式缩放；CSS变量配合calc()可精准响应式缩放。
如果您希望调整HTML页面的整体显示大小，可以通过CSS或JavaScript动态控制页面的缩放比例。以下是几种可直接实施的技术方案：
一、使用CSS transform属性缩放整个页面
该方法通过修改根元素（如body或html）的transform: scale()值，实现视觉上的等比缩放，不影响文档流和布局计算，适用于局部或全局缩放需求。
1、在CSS中为
元素添加transform属性，并设置scale值，例如缩放至80%：2、添加transform-origin: 0 0确保缩放以左上角为基准点，避免内容偏移出视口
立即学习“前端免费学习笔记（深入）”；
3、为防止水平滚动条出现，补充设置body的宽度为1/缩放比例的倒数，例如scale(0.8)时设width: 125%
二、使用CSS zoom属性（仅部分浏览器支持）
zoom是IE和旧版WebKit内核浏览器支持的非标准属性，可在支持环境中快速实现页面缩放，但现代Chrome/Firefox已弃用，不推荐用于跨浏览器生产环境。
1、在
2、注意该属性不会触发重排，仅影响渲染层，且Firefox完全不支持zoom属性
三、通过meta viewport标签控制移动端初始缩放
该方式专用于移动设备，通过设置viewport元标签的initial-scale、maximum-scale等参数，控制页面加载时的初始缩放级别及用户是否可手动缩放。
1、在
中插入viewport meta标签：
2、initial-scale=1.0表示以设备独立像素宽度为基准的1:1缩放；若设为0.75则页面初始缩小至75%
3、该标签仅对移动浏览器生效，在桌面端Chrome等浏览器中被忽略
四、使用JavaScript动态修改CSS transform实现交互式缩放
通过监听用户操作（如按钮点击或滚轮事件），实时更新body元素的transform scale值，从而实现可编程的缩放控制。
1、为body元素设置初始transform样式：
document.body.style.transform = 'scale(1)'; document.body.style.transformOrigin = '0 0';
2、定义缩放函数，例如放大10%：
function zoomIn() { const current = parseFloat(getComputedStyle(document.body).transform.split(',')[0].split('(')[1]) || 1; document.body.style.transform = `scale(${Math.min(current * 1.1, 3)})`; }
3、绑定按钮点击事件调用该函数，并同步调整body宽度以匹配缩放比例：
document.getElementById('zoomInBtn').onclick = zoomIn;
五、使用CSS自定义属性配合calc()实现响应式缩放
利用CSS变量存储缩放因子，结合calc()动态计算字体大小、间距等关键尺寸，使页面各元素按比例协调变化，避免transform缩放导致的模糊或交互偏移问题。
1、在:root中声明缩放变量：
2、对需缩放的元素应用基于变量的尺寸，例如：h1 { font-size: calc(2rem * var(--zoom-factor)); margin: calc(1em * var(--zoom-factor)) 0; }
3、通过JavaScript修改CSS变量值即可批量更新所有依赖该变量的样式：
document.documentElement.style.setProperty('--zoom-factor', '0.9');
