iOS微信网页长按图片问题解决

问题环境

我手里的测试设备：
手机：iphone8,
系统：iOS13.4.1
微信版本：7.0.12

问题一：点按图片，图片浮在屏幕上

iOS系统中，点按图片，图片会浮在屏幕上方，图片下方会出现iOS系统默认的共享等菜单。这种情况，无法实现长按识别问题。
解决方法，设置样式，阻止默认行为：

  img {
    -webkit-touch-callout: none;
  }

问题二：长按图片，只有保存，没有识别二维码，发送给好朋友等

为解决这个问题，我查看了好多博客文章，最后自己尝试，摸索着解决了。
个人理解，主要是iOS系统里的微信存在两个问题：

• 图片显示的尺寸太小，微信无法识别里面的二维码
• 微信环境对单页面应用支持不够友好，单页面路由导致长按图片无法出现完整菜单
  解决方案：

1. 加大图片显示的尺寸，这个根据展示情况可以自己尝试。
2. 在单页面应用里，重新替换一下二维码图片所在的页面的链接

// vue项目，可以在mounted方法里执行
location.replace(location.href)

---

做前端，就要面对各种兼容性问题。
大半天时间，就被这么个问题消耗掉了。