如何通过代码设置Blazor Server网站全局默认缩放级别？

可以实现，你之前的问题核心是两点：一是缩放方向搞反了（你用了放大1.8倍，实际要模拟浏览器90%缩放得用scale(0.9)），二是没处理缩放后的容器占位，导致元素缩小后无法占满屏幕。下面是两种可行的解决办法：

方案1：根容器缩放+尺寸补偿（推荐） #

在你的_Layout.cshtml里，找到包裹整个应用的最外层容器（通常是<div id="app">或者直接作用于<body>），添加以下CSS样式：

#app {
    /* 模拟浏览器90%缩放 */
    transform: scale(0.9);
    /* 缩放原点设为左上角，避免页面偏移 */
    transform-origin: top left;
    /* 补偿缩放后的尺寸，让容器占满屏幕 */
    width: calc(100% / 0.9);
    height: calc(100% / 0.9);
    /* 隐藏溢出内容，避免出现滚动条 */
    overflow: hidden;
}

原理说明 #

• transform: scale(0.9)：将整个应用缩小到原尺寸的90%，和浏览器手动调到90%缩放的视觉效果一致。
• transform-origin: top left：确保缩放从左上角开始，不会让页面整体偏移。
• width: calc(100% / 0.9)：因为缩放后元素的显示尺寸是原尺寸的90%，把容器宽度放大到屏幕宽度的1/0.9倍，缩放后刚好填满屏幕，不会留空白。高度同理。

方案2：通过Viewport元标签控制（适合移动端为主的场景） #

如果你的网站兼顾移动端，可以在_Layout.cshtml的<head>里修改viewport元标签：

<meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=0.9, user-scalable=no">

注意事项 #

• 这个方案在桌面端部分浏览器可能不生效，且用户仍可通过浏览器设置强制修改缩放比例，适合移动端优先的场景。
• 添加user-scalable=no可以禁止用户手动调整缩放，但部分浏览器可能限制这个属性。

额外注意点 #

• 测试第三方组件兼容性：比如你用到的datagrid、表格组件，缩放后可能会出现布局错位或交互异常，需要针对性调试。
• 鼠标/键盘坐标偏移：极端情况下，缩放可能导致鼠标点击坐标和实际元素位置不匹配，但Blazor Server的组件大多基于DOM事件，影响很小，若遇到问题可通过JS修正坐标。

内容的提问来源于stack exchange，提问作者Baldie47