Angular Universal Pre-render：未正确处理具有横向方向的台式机和手持设备的 CSS 媒体查询答案

【问题标题】：Angular Universal Pre-render : Not handling CSS media queries for Desktops & handheld devices with landscape orientation correctlyAngular Universal Pre-render：未正确处理具有横向方向的台式机和手持设备的 CSS 媒体查询
【发布时间】：2022-01-19 14:29:31
【问题描述】：

我将 Angular Universal 与我现有的 Angular 10 Web 应用程序集成，以生成用于 SEO 的预渲染版本。我检测到用户何时在其移动/平板设备上以横向模式（使用媒体查询）查看 Web 应用程序并显示一条消息：“请旋转您的设备，我们不支持横向模式，请以纵向模式使用该应用程序以获得最佳效果经验”。这适用于常规构建。但是通过预渲染构建，它会为所有设备显示消息，即使是纵向模式，也适用于桌面，这是不应该的。我不确定为什么会这样。

当我在本地提供 dist 文件夹并签入 localhost 时，预渲染的构建工作正常。但是当我将它托管在服务器上时，它会开始为所有设备显示消息。

app.component.html

<div id="container">
    <router-outlet></router-outlet>
</div>
<div id="turn">
    <div class="landscapeMesBlock">
        <p class="landscapeMes">
            Please rotate your device, <span class="landscapeMesInner">We do not support landscape mode, Please use the app
                in portrait mode for best
                experience</span>
        </p>
    </div>
</div>

CSS / 媒体查询

@media screen and (min-width: 481px) and (max-width: 851px) and (orientation: landscape) {
  /* Styles */
  #turn {
    display: block !important;
  }

  #container {
    display: none;
  }
}

#turn {
  display: none;
}

@media only screen and (max-width: 800px) and (min-width: 768px) {
  .sort_apply_bttn {
    text-align: center;
    max-width: 460px !important;
    margin: 0 auto !important;
    padding: 0px;
  }
  #turn {
    display: none !important;
  }

  #container {
    display: block;
  }
}

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <base href="/">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  <meta http-equiv="Content-Security-Policy"
    content="script-src 'self' https://maps.googleapis.com https://maps.gstatic.com; object-src 'self';">
  
  <link rel="preload" href="/assets/fonts/aktivgroteskw06-mediumregular.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/assets/fonts/aktivgroteskw06-lightregular.woff2" as="font" type="font/woff2" crossorigin> 
  <link rel="preload" href="/assets/fonts/aktivgroteskw04-thinregular.woff2" as="font" type="font/woff2" crossorigin> 
  <link rel="preload" href="/assets/fonts/aktivgroteskw06-regularRg.woff2" as="font" type="font/woff2" crossorigin> 
  <!-- <meta http-equiv="ScreenOrientation" content="autoRotate:disabled"> -->

  <!-- loader style  -->
  <style>
    .loader_section_block { 
      position: absolute;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .loader_section {
      border-radius: 5px;
      width: 90px;
      height: 90px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #efefef;
    }

    .loader_section img {
      width: 60px;
      margin-top: -13px;
      height: 60px;
    }

    .loader_section p {
      font-size: 12px;
      font-family: sans-serif !important;
      margin: 0px;
      text-align: center;
      margin-top: -9px;
    }
  </style>

</head>

<body>
  <app-root>
    <div class="loader_section_block">
      <section class="loader_section">
        <div class="medium_regular_font d-flex flex-column align-items-center">
          <img loading="lazy" src="assets/images/Test-Loader.gif" alt="loading">
          <p class="mb-0 text-center">Loading...</p>
        </div>
      </section>
    </div>
  </app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
  <script src="https://maps.googleapis.com/maps/api/js?key=****"
  type="text/javascript" async defer></script>
</body>
</html>

控制台中没有错误消息

【问题讨论】：

标签： angular angular-universal pre-rendering

【解决方案1】：

我认为您需要重新启动运行 Angular 应用程序的服务器。两周前我遇到了类似的更新问题，它在本地按预期工作，但在服务器上没有，并且在重新启动 pm2 并再次配置 pm2 后已修复。

ps：Angular Universal 没有窗口和屏幕的概念，因为它是服务器，而不是浏览器，这就是为什么忽略宽度控制的原因。

【讨论】：