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

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

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

阅读 2.3k
1 个回答

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题