如何处理ndex.html中的条件viewport元标记?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (69)

我有一个angular模块,里面有两个子模块,一个用于用户,另一个用于管理。当然,它们都是相同的。

在我的用户模块中,我希望<meta name="viewport" content="width=device-width, initial-scale=1"><head></head>标签。

虽然我希望它被删除在我的管理模块,只有桌面视图的手机是这样。

我厌倦了在ADMIN第一个组件构造函数中这样做:

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

标记正在被移除,但这是在应用程序开始呈现这个元标记之后,因为它在index.html因此,它没有给出所需的结果。

有任何建议要有条件地添加这个元吗?最难的部分是,它应该放在index.html的头上。

提问于
用户回答回答于

似乎你必须手动将视口设置为其他内容。尝试移除元标记并将其设置为其他东西,如本例所示:

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

如果你从Mobile中查看以下示例,它将首先显示响应视图(设置在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' })
    })
  }

}

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励