tinymce编辑器复制带有移动端适配的网站 使用v-html渲染样式出问题 应该怎么解决

Question

tinymce编辑器复制带有移动端适配的网站 使用v-html渲染样式出问题 应该怎么解决？？
复制网站进去的样式

使用v-html渲染出来的样式

有没有人知道该怎么解决？

Answer 1

在v-html中渲染带有移动端适配的网站时，可能会出现样式错乱的问题。这是因为移动端网站的样式通常是针对移动设备的屏幕大小和分辨率进行适配的，而在v-html中渲染时，可能会出现屏幕大小和分辨率不一致的情况，导致样式错乱。
为了解决这个问题，可以尝试以下两种方法：

使用iframe标签来渲染移动端网站。
iframe标签可以将一个HTML文档嵌入到另一个HTML文档中。使用iframe标签来渲染移动端网站可以将移动端网站的样式和布局保持不变，避免在不同设备上的样式错乱问题。

<template>
  <div>
    <iframe :src="mobileSiteUrl" frameborder="0" width="100%" height="100%"></iframe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mobileSiteUrl: 'https://m.example.com' // 移动端网站的URL
    }
  }
}
</script>

使用viewport标签来适配屏幕大小。
在v-html中渲染移动端网站时，可以在head标签中添加viewport标签来适配屏幕大小和分辨率。viewport标签可以告诉浏览器如何渲染页面，包括设置页面宽度、缩放比例等信息。

<template>
  <div v-html="mobileSiteHtml"></div>
</template>
<script>
export default {
  data() {
    return {
      mobileSiteHtml: '...' // 移动端网站的HTML代码
    }
  },
  mounted() {
    // 在渲染完移动端网站后，动态添加viewport标签
    this.addViewportTag()
  },
  methods: {
    addViewportTag() {
      const viewport = document.createElement('meta')
      viewport.setAttribute('name', 'viewport')
      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no')
      document.head.appendChild(viewport)
    }
  }
}
</script>

在上述代码中，addViewportTag方法用来动态添加viewport标签，设置页面的宽度为设备的宽度，并禁止用户进行缩放操作。
综上所述，使用iframe标签或添加viewport标签都可以解决在v-html中渲染移动端网站时出现的样式错乱问题，具体选择哪种方法可以根据实际情况来决定。