Question

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

在我的用户模块中，我想将<meta name="viewport" content="width=device-width, initial-scale=1">的{{1}}标记中的<head></head>

虽然我希望在管理模块中将其删除，而仅保留手机的桌面视图。

我很讨厌在admin第一组件构造函数中执行此操作：

index.html

该标签已被删除，但是那是在应用开始存在该元标签的情况下渲染的，因为它位于import { Meta } from '@angular/platform-browser'; this.meta.removeTag('name="viewport"');中，因此它无法提供所需的结果

有任何建议实际上有条件地添加此meta吗？困难的部分是它应该位于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中的条件视口元标记

1 个答案: