Blazor 客户端：移动设备上的一切都很小答案

【问题标题】：Blazor Client Side: everything is small on mobileBlazor 客户端：移动设备上的一切都很小
【发布时间】：2022-02-01 14:41:05
【问题描述】：

我在线发布了我的应用程序以进行测试。在计算机上它运行良好，但在移动设备上一切都非常小。我可以通过使用 DevTools 和响应模式来重现这个错误。本地没有错误，但仅在 linux 服务器上。我只是在 Visual Studio 中发布了项目并将文件复制到服务器上（CentOS-7、Apache/2.4.6）（在 Debian 上有相同的错误）。我还在 /etc/httpd/conf.d 中添加了 blazorapp.conf 配置文件：

<VirtualHost *:80>
    ServerName my.website.com

    DocumentRoot "/var/www/blazorapp"
    ErrorDocument 404 /index.html

    AddType application/wasm .wasm
    AddType application/octet-stream .dll

    <Directory "/var/www/blazorapp">
        Options -Indexes
        AllowOverride None
    </Directory>

    <IfModule mod_deflate.c>
        AddOutputFilterByType DEFLATE text/css
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE text/html
        AddOutputFilterByType DEFLATE application/octet-stream
        AddOutputFilterByType DEFLATE application/wasm
        <IfModule mod_setenvif.c>
      BrowserMatch ^Mozilla/4 gzip-only-text/html
      BrowserMatch ^Mozilla/4.0[678] no-gzip
      BrowserMatch bMSIE !no-gzip !gzip-only-text/html
  </IfModule>
    </IfModule>

    ErrorLog /var/log/httpd/blazorapp-error.log
    CustomLog /var/log/httpd/blazorapp-access.log common
</VirtualHost>

应该是这样的：

移动版的情况如何：

【问题讨论】：

标签： linux responsive blazor-webassembly

【解决方案1】：

这很可能是标题问题。在您页面的 <head> 部分，您需要以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

我有点惊讶它还没有设置，因为我很确定默认的 Blazor 项目包括这个。

【讨论】：

这个已经在 index.html 中设置了
您是否真的使用开发工具检查了您的页面以确保它位于<head> 中？我以前遇到过这个问题，而且 100% 的时间都是这个问题。

【解决方案2】：

我发现了问题。我的网站在私人服务器上，外部端口不在端口 80 或 443 上。移动设备使用计算机视图而不是移动视图（为了安全？）。也许有人可以给出比我更清楚的答案（对netwerk不太了解）。

【讨论】：