在 Blazor 服务器端应用程序中，您可能会遇到 Android/iOS 设备的视图问题，该问题会导致 UI 元素放大并偏离其位置。 这是由于 Android/iOS 采用的设备像素比例与服务器端呈现的应用程序不同，而且在 Android/iOS 上的缩放比例不同.

解决此问题的方法是使用 CSS 缩放我们的应用程序，以根据设备像素比例自动调整比例。

在您的样式表中，请添加以下代码：

@media (min-width: 576px) { html { zoom: 0.75; transform: scale(0.8); }

body { transform: scale(1.25); } }

@media (min-width: 768px) { html { zoom: 0.5; transform: scale(0.6666666667); }

body { transform: scale(1.5); } }

@media (min-width: 992px) { html { zoom: 0.4; transform: scale(0.625); }

body { transform: scale(1.6666666667); } }

@media (min-width: 1200px) { html { zoom: 0.3125; transform: scale(0.8); }

body { transform: scale(1.25); } }

此代码使用了 CSS 的 zoom 和 transform 缩放方法来自适应不同的设备像素比例和屏幕大小。 请注意，当您的应用程序运行时，它应该在大屏幕上运行得更好，在小屏幕上运行得更少。

有关更多详细信息，请阅读此 Microsoft 文档。