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

sisimh 发表于 Dev

西西姆

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

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

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

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

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

标记将被删除，但是在应用程序开始渲染后，由于存在此meta标记，index.html因此该标记无法提供所需的结果

有任何建议实际上有条件地添加此meta吗？困难的部分是它应该位于index.html的头部。

贝内特·哈德威克

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

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

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。