在一个html页面中，通过v-html插入另一个html页面，如果限制第二个html页面的缩放范围？

Question

在页面A中的div元素B(有固定宽髙），通过v-html渲染了另一个html页面C。
要对这个新插入的页面C增加缩放功能，但是缩放范围仅局限在B元素的范围内，不影响整个A页面。
页面C本身是无法缩放的，通过增加meta name='viewport' content='xxx' 标签实现了缩放功能。但是进而影响到了整个页面。A页面也变得可以进行缩放了。
有什么方法可以只让页面C在div元素B范围内进行缩放，而不影响到整个页面么？

或者有没有什么办法可以限制meta标签的有效范围？

Answer 1

使用 CSS 的子选择器应该可行：

<template>
<B class='b' v-html='<div>C</div>'>
</template>
<style>
.b>*{
    transform: scale(1.5);
}
</style>

当然你也可以用 iframe 来包含 html 的内容。