weex中web标签加载手机端页面适配

最新推荐文章于 2024-09-01 22:45:33 发布

油油011

最新推荐文章于 2024-09-01 22:45:33 发布

阅读量1.6k

点赞数 2

分类专栏： Weex 文章标签： weex

本文链接：https://blog.csdn.net/u013836363/article/details/55210452

版权

Weex 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

weex中web标签加载手机端页面适配

用web标签加载手机端页面的时候，外部viewport会影响到iframe。

weex外部加载的viewport

<meta name="viewport" content="width=750,initial-scale=0.552,maximum-scale=0.552,minimum-scale=0.552,user-scalable=no">

解决方法

http://ask.csdn.net/questions/177477，在web标签上加样式

width: 50vw;
height: 50vh;
transform-origin: 0 0;
transform: scale(2);

测试代码

http://dotwe.org/

<template>
  <div class="wrapper">

    <web ref="webview" :src="url" class="wrapper-webview"></web>
  </div>
</template>
<script>
  const webview = weex.requireModule('webview')
  export default {
    data () {
      return {
        url : 'http://a.mp.uc.cn/article.html?uc_param_str=frdnsnpfvecpntnwprdssskt&client=ucweb&wm_aid=610fcaa9d79f4deeb6af99087b766e62&wm_id=fd765ac01768421a8ac27b3474817be8&pagetype=share&btifl=100'
      }
    }
  }
</script>
<style scoped>
  .wrapper {
    width: 100%;
    height:100%;
    background:#EBEBEB;
    color:#4d4d4d;
  }
  .wrapper-webview {
    width: 50vw;
    height: 50vh;
    transform-origin: 0 0;
    transform: scale(2);
  }
</style>