index.html中的条件视口元标记
index.html中的条件视口元标记
提问于 2018-08-01 06:40:23
我有一个角度模块有两个子模块在它，一个为用户和另一个为管理员。当然，它们共享相同的index.html文件。
在我的用户模块中，我希望在index.html的<head></head>标记中包含<meta name="viewport" content="width=device-width, initial-scale=1">
虽然我希望它在我的管理模块中删除，并只有手机的桌面视图是。
我试着在admin first组件构造函数中这样做：
import { Meta } from '@angular/platform-browser';
this.meta.removeTag('name="viewport"'); 标签正在被移除，但这是在应用程序开始呈现此元标签之后，因为它在index.html中，所以它不会给出预期的结果
有什么建议可以有条件地添加这个meta吗？困难的部分是它应该在index.html的头部。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-01 06:59:59
似乎您必须手动将视口设置为其他值。尝试删除meta标签并将其设置为其他值，如下例所示：
https://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html
如果您在移动端查看以下示例，它将首先显示response视图(在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' })
})
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51623086
复制相关文章
相似问题