MAUI Blazor应用适配Windows显示缩放比例问题求助

针对你遇到的Bootstrap 5.2在MAUI Blazor Windows端高DPI（125%/150%）下布局错乱的问题，以下是几个可行的解决方案：

方案1：强制MAUI应用以100%DPI缩放运行 #

直接从应用层面禁用系统DPI缩放适配，让应用始终按原生尺寸渲染：

1. 打开Platforms/Windows/App.xaml.cs，修改OnLaunched方法，引入Windows API强制进程DPI感知模式：

   protected override void OnLaunched(LaunchActivatedEventArgs args)
   {
       base.OnLaunched(args);
       // 设置进程不感知DPI，强制系统按100%缩放渲染
       SetProcessDpiAwarenessContext(DPI_AWARENESS_CONTEXT_UNAWARE_GDISCALED);
   }
   
   // 引入所需的Windows API
   [System.Runtime.InteropServices.DllImport("user32.dll")]
   private static extern bool SetProcessDpiAwarenessContext(System.IntPtr dpiContext);
   private static readonly System.IntPtr DPI_AWARENESS_CONTEXT_UNAWARE_GDISCALED = new System.IntPtr(-4);
   

2. 该方法会让应用完全忽略系统缩放，所有内容按原生尺寸显示，不会出现Bootstrap组件错位问题，但高分辨率屏幕下内容可能偏小。

方案2：修复Bootstrap动态组件的CSS适配问题 #

如果不想修改应用DPI感知模式，可以针对Bootstrap的popover、tooltip等动态生成组件单独调整CSS：

1. 在全局CSS文件中添加以下样式：

   /* 根元素根据设备像素比反向缩放 */
   :root {
       --device-pixel-ratio: 1;
       transform: scale(calc(1 / var(--device-pixel-ratio)));
       transform-origin: top left;
       width: calc(100% * var(--device-pixel-ratio));
       height: calc(100% * var(--device-pixel-ratio));
       overflow: hidden;
   }
   
   /* 动态组件抵消根元素的缩放影响 */
   .popover, .tooltip, .modal {
       transform: scale(var(--device-pixel-ratio)) !important;
       transform-origin: inherit !important;
   }
   

2. 在MainLayout.razor中注入JS运行时，动态获取设备像素比并设置CSS变量：

   @inject IJSRuntime JSRuntime
   
   @code {
       protected override async Task OnAfterRenderAsync(bool firstRender)
       {
           if (firstRender)
           {
               var pixelRatio = await JSRuntime.InvokeAsync<double>("window.devicePixelRatio");
               await JSRuntime.InvokeVoidAsync("document.documentElement.style.setProperty", "--device-pixel-ratio", pixelRatio.ToString());
           }
       }
   }
   

这种方法通过CSS变换实现全局缩放适配，同时修正动态组件的缩放偏移。

方案3：使用DPI媒体查询针对性调整 #

针对不同系统缩放比例编写媒体查询，精准控制根元素和Bootstrap组件的缩放：

/* 对应125%系统缩放（120dpi） */
@media (min-resolution: 120dpi) {
   :root {
       zoom: 0.8;
   }
   .popover, .tooltip {
       zoom: 1.25 !important;
   }
}

/* 对应150%系统缩放（144dpi） */
@media (min-resolution: 144dpi) {
   :root {
       zoom: 0.6667;
   }
   .popover, .tooltip {
       zoom: 1.5 !important;
   }
}

通过根元素反向缩放抵消系统DPI，再让动态组件恢复原比例，解决错位问题。

内容的提问来源于stack exchange，提问作者Yana R.