我有一些组件，它们通过<ion-router-outlet>文件中的app.component.html显示。组件分辨率为2160X3840，如果是16：9，我想将查看的范围从<ion-router-outlet>缩放到实际显示尺寸。
我尝试创建一个简短的游戏，并且我需要一个系统来支持不同的移动显示分辨率，而又不会显得很奇怪。我认为最简单的方法是将组件设置为尽可能高的分辨率，并在显示器不那么大的情况下按比例缩小。
我尝试了高分辨率。组件scss文件：
:host {
display: block;
left: 0;
width: 100%;
height: 100%;
}
，然后将<ion-router-outlet>放入div标签：
<div [style.width]="displayWidth" [style.height]="displayHeight">
<ion-router-outlet></ion-router-outlet>
</div>
displayWidht和displayHeight在app.component.ts文件中声明。
上面的代码令人愉快。我能够完美地调整背景图像的大小，但是我使用的标签显示错误。诸如视口或模块之类的东西使我能够从组件缩放呈现的视图将是很棒的。