index.html 中的条件视口元标记

Question

我有一个 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.

的头部

Answer 1

看来您必须手动将视口设置为其他内容。尝试删除元标记并将其设置为其他内容，如本例所示：

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' })
    })
  }

}

index.html 中的条件视口元标记

conditional viewport meta tag in index.html

viewport

meta-tags

typescript

angular

angular5