Angular项目部署后Viewport异常：本地正常服务器端移动端显示缩放问题

• Angular构建过程篡改了Viewport标签
  检查angular.json的构建配置，部分优化插件或配置项可能在生产构建时自动修改index.html中的meta标签。直接查看服务器上部署的index.html源码，对比本地开发环境的viewport内容是否一致。如果使用了Angular的Meta服务动态设置viewport，确认生产环境下该服务是否正确初始化并注入标签。

• 服务器端改写了HTML内容
  部分服务器（如Nginx、CDN）可能存在HTML改写规则，会自动调整viewport标签的属性。直接查看在线页面的源码（右键→查看页面源代码），检查实际输出的viewport配置是否与本地一致。

• CSS媒体查询未正确加载或优先级冲突
  构建后的CSS文件可能存在路径错误，导致移动端媒体查询的样式未被加载。另外，检查CSS中媒体查询的写法是否规范，是否被全局样式或更高优先级的选择器覆盖。可以在开发者工具中查看元素的样式面板，确认对应媒体查询的样式是否被应用。

• 浏览器缓存导致旧资源未更新
  用户端浏览器可能缓存了旧的HTML或CSS文件，即使服务器部署了新代码，仍加载旧资源。可以强制刷新页面（Ctrl+Shift+R）测试，同时建议在Angular构建时给静态资源添加哈希值（angular.json中outputHashing设置为all），避免缓存问题。

内容的提问来源于stack exchange，提问作者Rick