为什么我的 Angular 网站上的某些样式在移动设备上会损坏，但在桌面设备上却很好？

Question

我已经通过 GitHub Pages 部署了一个基于 Angular 的网站，它适用于所有桌面屏幕，包括移动设备尺寸。但是，当我使用实际的智能手机（IOS 或 Android）访问我的网站时，某些样式会消失。具体来说，我注意到字体和背景颜色是错误的，尽管网格、边距和填充符合预期。

注意事项：

-我始终使用 PrimeNG 组件和主题。这些组件本身看起来不错，它们有正确的颜色主题。

-我按照官方文档here

将我的应用程序部署到GitHub Pages

-我看到这个问题的一个常见答案是在 index.html 文件中包含

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

，该文件已经存在。

我尝试过的事情：

-在Ipad上看我发现加载桌面版还好，但是切换到移动版就破坏了样式

-重建并重新部署站点，问题依旧

我所期望的：桌面截图

我得到的：来自三星 S20FE 手机的屏幕截图，亮/暗模式

可能的相关代码：来自内置文件夹中的 index.html

<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <title>Frontend</title>
  <base href="/dealership-project/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<style>*{box-sizing:border-box;padding:0;margin:0;font-family:Nobel,Arial,sans-serif;color:#fff}:root{--surface-a:#1f2d40;--surface-b:#17212f;--surface-c:rgba(255, 255, 255, .03);--surface-d:#304562;--surface-e:#1f2d40;--surface-f:#1f2d40;--text-color:rgba(255, 255, 255, .87);--text-color-secondary:rgba(255, 255, 255, .6);--primary-color:#64B5F6;--primary-color-text:#212529;--font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;--surface-0:#17212f;--surface-50:#2e3744;--surface-100:#454d59;--surface-200:#5d646d;--surface-300:#747a82;--surface-400:#8b9097;--surface-500:#a2a6ac;--surface-600:#b9bcc1;--surface-700:#d1d3d5;--surface-800:#e8e9ea;--surface-900:#ffffff;--gray-50:#e8e9ea;--gray-100:#d1d3d5;--gray-200:#b9bcc1;--gray-300:#a2a6ac;--gray-400:#8b9097;--gray-500:#747a82;--gray-600:#5d646d;--gray-700:#454d59;--gray-800:#2e3744;--gray-900:#17212f;--content-padding:1rem;--inline-spacing:.5rem;--border-radius:3px;--surface-ground:#17212f;--surface-section:#17212f;--surface-card:#1f2d40;--surface-overlay:#1f2d40;--surface-border:#304562;--surface-hover:rgba(255,255,255,.03);--maskbg:rgba(0, 0, 0, .4);--focus-ring:0 0 0 1px #93cbf9;color-scheme:light dark}*{box-sizing:border-box}:root{--blue-50:#f4fafe;--blue-100:#cae6fc;--blue-200:#a0d2fa;--blue-300:#75bef8;--blue-400:#4baaf5;--blue-500:#2196f3;--blue-600:#1c80cf;--blue-700:#1769aa;--blue-800:#125386;--blue-900:#0d3c61;--green-50:#f6fbf6;--green-100:#d4ecd5;--green-200:#b2ddb4;--green-300:#90cd93;--green-400:#6ebe71;--green-500:#4caf50;--green-600:#419544;--green-700:#357b38;--green-800:#2a602c;--green-900:#1e4620;--yellow-50:#fffcf5;--yellow-100:#fef0cd;--yellow-200:#fde4a5;--yellow-300:#fdd87d;--yellow-400:#fccc55;--yellow-500:#fbc02d;--yellow-600:#d5a326;--yellow-700:#b08620;--yellow-800:#8a6a19;--yellow-900:#644d12;--cyan-50:#f2fcfd;--cyan-100:#c2eff5;--cyan-200:#91e2ed;--cyan-300:#61d5e4;--cyan-400:#30c9dc;--cyan-500:#00bcd4;--cyan-600:#00a0b4;--cyan-700:#008494;--cyan-800:#006775;--cyan-900:#004b55;--pink-50:#fef4f7;--pink-100:#fac9da;--pink-200:#f69ebc;--pink-300:#f1749e;--pink-400:#ed4981;--pink-500:#e91e63;--pink-600:#c61a54;--pink-700:#a31545;--pink-800:#801136;--pink-900:#5d0c28;--indigo-50:#f5f6fb;--indigo-100:#d1d5ed;--indigo-200:#acb4df;--indigo-300:#8893d1;--indigo-400:#6372c3;--indigo-500:#3f51b5;--indigo-600:#36459a;--indigo-700:#2c397f;--indigo-800:#232d64;--indigo-900:#192048;--teal-50:#f2faf9;--teal-100:#c2e6e2;--teal-200:#91d2cc;--teal-300:#61beb5;--teal-400:#30aa9f;--teal-500:#009688;--teal-600:#008074;--teal-700:#00695f;--teal-800:#00534b;--teal-900:#003c36;--orange-50:#fff8f2;--orange-100:#fde0c2;--orange-200:#fbc791;--orange-300:#f9ae61;--orange-400:#f79530;--orange-500:#f57c00;--orange-600:#d06900;--orange-700:#ac5700;--orange-800:#874400;--orange-900:#623200;--bluegray-50:#f7f9f9;--bluegray-100:#d9e0e3;--bluegray-200:#bbc7cd;--bluegray-300:#9caeb7;--bluegray-400:#7e96a1;--bluegray-500:#607d8b;--bluegray-600:#526a76;--bluegray-700:#435861;--bluegray-800:#35454c;--bluegray-900:#263238;--purple-50:#faf4fb;--purple-100:#e7cbec;--purple-200:#d4a2dd;--purple-300:#c279ce;--purple-400:#af50bf;--purple-500:#9c27b0;--purple-600:#852196;--purple-700:#6d1b7b;--purple-800:#561561;--purple-900:#3e1046;--red-50:#fff5f5;--red-100:#ffd1ce;--red-200:#ffada7;--red-300:#ff8980;--red-400:#ff6459;--red-500:#ff4032;--red-600:#d9362b;--red-700:#b32d23;--red-800:#8c231c;--red-900:#661a14;--primary-50:#f7fbff;--primary-100:#daedfd;--primary-200:#bcdffb;--primary-300:#9fd1f9;--primary-400:#81c3f8;--primary-500:#64b5f6;--primary-600:#559ad1;--primary-700:#467fac;--primary-800:#376487;--primary-900:#284862}</style><link rel="stylesheet" href="styles.d1193b05cd6fe5da.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.d1193b05cd6fe5da.css"></noscript></head>

<body>
  <app-root></app-root>
<script src="runtime.f0cd325c9a9e41bb.js" type="module"></script><script src="polyfills.48032dd0403ca3fa.js" type="module"></script><script src="main.1af2a17a10614c2f.js" type="module"></script>

</body></html>

站点和代码库的链接： 请忽略与照片奇怪/消失有关的任何事情，它们都是占位符

https://cdonougherlee.github.io/dealership-project/landing

https://github.com/cdonougherlee/dealership-project/tree/gh-pages

为什么我的 Angular 网站上的某些样式在移动设备上会损坏，但在桌面设备上却很好？

问题描述投票：0回答：0

最新问题

为什么我的 Angular 网站上的某些样式在移动设备上会损坏，但在桌面设备上却很好？

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0