ios使用scale后，调用高德地图，地图也会被缩掉，怎么解决？

[Lee908105576]

No description provided.

[codekissyoung]

@Lee908105576 来点代码！！！

[shinyChen]

链家网手机版就遇到了这个问题，采取的方案是：对于地图进行zoom，比例为dpr。链接地址
scale当时没试过，理论上可以，但是是从中心点开始，需要transform-origin: 0 0 0。
还是zoom简单，不用写前缀，一个属性搞定。

[NextSeason]

@shinyChen 拖动的时候还是存在问题。

[shinyChen]

贴个链接吧，拖动的时候存在什么问题？拜托说得清楚点，要不怎么帮你解决问题

[changfuguo]

我用百度地图api也遇到这个问题，做法就是手动设置meta 设置为默认1，这个时候flexible就不会干预了

[pimkle]

@changfuguo 如果这样解决的话 这个页面其他的div 适配不会被打成原型吗？

[shiregg]

ios中，这是iphone6

echarts整个都缩小了一半。

[songsiqi]

可以手动设置一下 viewport 不缩放， <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"> 就可以了。但是会有个问题，1px 的线不细了

[94dreamer]

如何手动设置

[94dreamer]

@shinyChen 手机sacle之后 地图变模糊

[66beta]

有个简单粗暴的办法：
1、在当前页面（组件），重置下meta标签和dpr

mounted () {
    this.$nextTick(function () {
      const dpr = document.documentElement.getAttribute('data-dpr')
      if (dpr > 1) {
        window.tempViewport = document.querySelector('meta[name="viewport"]').getAttribute('content')
        document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no')
        window.tempDpr = dpr
        document.documentElement.setAttribute('data-dpr', 1)
      }
    })
  //.......
}

2、离开页面的时候，再还原回去：

beforeRouteLeave (to, from, next) {
    if (window.tempViewport) {
      document.querySelector('meta[name="viewport"]').setAttribute('content', window.tempViewport)
      delete window.tempViewport
    }
    if (window.tempDpr) {
      document.documentElement.setAttribute('data-dpr', window.tempDpr)
      delete window.tempDpr
    }
    next()
}

3、覆盖地图组件的样式

如果不用vue-router的话，可以用mixins