在viewport缩放时要如何使用，比如0.5缩放，组件展示就小了一倍

[hooray]

No description provided.

[deepkolos]

@hooray 可以给个截图么~ 附上viewport的设置, 和大概画一下想要的组件缩放结果

[hooray]

直接在页面头部设置 meta 标签即可

<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">

想要的效果当然是尽量和 viewport 缩放为 1 时一样就好

[deepkolos]

@hooray 好的, 的确是样子不堪入目, 不过还没有思路, 需要看一下initial-scale的影响

[hooray]

@deepkolos 之前用 iOSselect 的时候，它有针对 viewport 提供了一个解决方案，希望能给你有参考

[deepkolos]

@hooray 原来是rem实现的响应式, 我只是过vw的方法, 还没试过rem的方案

所以是样式层的改动, 可以通过vue的深度选择符 >>> 或者 /deep/ 来覆盖组件的样式来适配项目使用的响应式方案

[zhaipeihua]

点击图片报这个错，实在不知道问题出在哪儿，还望大神指点迷津

[deepkolos]

@zhaipeihua 其实不是很推荐使用了, 我现在公司使用的时候也会遇到很多小问题, 虽然有些是新版chrome导致的, 在火狐却正常

感觉是依赖引入不正确
请检查body节点下面有class为vc-popup-conatiner的div

如果是单独使用的话

  import Vue from 'vue'
  import ImgViewer from 'vc-popup-img-viewer'
  Vue.use(ImgViewer)

如果是在项目改造版本的话, 则参见custom popup部分的代码
https://github.com/deepkolos/vc-popup/tree/master/example/components/popup-custom

使用则参见
https://github.com/deepkolos/vc-popup/blob/master/example/pages/popup-img-viewer.vue

[zhaipeihua]

您说不推荐使用，是因为浏览器兼容性不好吗还是其他原因呢？至于上述问题，居然是因为body下面的div的class类，将其改为id居然就可以使用了

[deepkolos]

@zhaipeihua 主要是实现不好太多bug, 比如新版本的chrome, 如果先设置transitionDuration, 然后rfa设置0ms, 下一个rfa设置为无效值, 之前的版本和火狐正常, 新版chrome则不会transition动画了, 后面打算使用vue的transition组件来做动画支持了, 在兼容性方面, 最大的问题算是和项目的自适应方面不适配吧, 比如你使用rem布局, 那么你就需要重写里面的样式, 如果是使用vh, vw的方式那么你就需要, 也类似的. 还有就是之前是刚开始接触vue的时候写的组件, 对通过new CompontentConstructor的时候并不是十分熟悉, 我的使用方式导致mounted的触发提前了, 在自定义popup的组件里面也不能获取$router/$store等对象, 数据交换还处于通过cb的方式, 接口的设计就更不用说了, 我自己过了几个月之后就不会用了, 也是尴尬的了. 还有就是返回键的支持是必选项, 有一些轻量级的弹窗是不需要支持的, 比如toast, 这也限制了使用范围了... 自己是知道有比较大的问题了, 只能说不够健壮吧. 有重构的念头, 但是还没实际的规划