index.html中的条件性viewport meta标签

Question

index.html中的条件性viewport meta标签

angulartypescriptangular5viewportmeta-tags

4

我有一个 Angular 模块，其中包含两个子模块，一个用于用户，另一个用于管理员。当然，它们共享相同的 index.html 文件。

在我的用户模块中，我想要在 index.html 的 <head></head> 标签中添加 <meta name="viewport" content="width=device-width, initial-scale=1">。

而对于我的管理员模块，我希望将其删除，并像桌面视图一样只显示手机的视图。

我试图在管理员的第一个组件构造函数中实现此操作：

import { Meta } from '@angular/platform-browser';
this.meta.removeTag('name="viewport"');

该标签正在被移除，但是在应用程序开始渲染时仍存在此元标记，因为它在index.html中，所以没有产生预期的结果。

有什么建议可以有条件地添加此元标记吗？难点在于它应该在index.html的头部。

- sisimh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bennett Hardwick · Accepted Answer

看起来您需要手动设置视口到其他值。尝试移除meta标签并将其设置为其他值，例如此示例：

https://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html

如果您从移动设备查看以下示例，它将首先显示响应式视图（在index.html中设置），然后在5秒后显示桌面版。

import { Component, OnInit } from '@angular/core';
import { Meta } from '@angular/platform-browser';
import { timer } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  constructor(
    private readonly meta: Meta
  ) { }

  ngOnInit(): void {
    timer(5000).subscribe(() => {
      this.meta.removeTag('name="viewport"');
      this.meta.addTag({ name: 'viewport', content: 'width=1000' })
    })
  }

}