移动端开发问题记录

记录本地项目开发过程中，遇到的问题。

本次项目开发，使用vue-cli 2.9 搭建，用于移动端新闻详情页开发。

1. 在IOS手机上，数字串会自动识别为 电话号码，并加上 <a> 标签

解决方法：在html中添加meta 标签

<meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no" />

2. 在微信中会有缓存，更新了代码之后，在微信网页中打开，还是显示的旧的代码，有的手机要过一段时间才能刷新

解决办法：防止页面缓存

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

但是把打包好的index.html放到服务器里去的时候，index.html在服务器端可能是有缓存的，这需要在服务器配置不让缓存index.html
nginx 配置如下：

location = /index.html {
    add_header Cache-Control "no-cache, no-store";
}

3. window.scrollTo 在某些低端的安卓手机上不起作用

解决办法：

if (window.scrollTo) {
    window.scrollTo({
      behavior: 'smooth',
      top: 200
    });
  } else {
    document.documentElement.scrollTop = 200;
    document.body.scrollTop = 200;
  }

4. 富文本渲染inline-block 会有3像素的空隙

参考张鑫旭的文章：https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

原因是：富文本在每个标签后面会有回车，标签之间还有大量的空格，根据张大大的提示，把所有元素写到一行就能解决

解决办法：

// 过滤所有的换行符和tab
detailDatass = detailDatass.replace(/[\n\r\t]/g, '');
// 去掉两个标签之前的空格，防止inline-block产生的空隙
detailDatass = detailDatass.replace(/>\s+</g, '><');

5. 由于使用了淘宝的适配方案 lib-flexible，在苹果手机上，没有设置宽高的图片会缩小到1/2或者1/3

解决办法：

[data-dpr="2"] img {
  width: 100%;
  zoom: 2;
}
[data-dpr="3"] img {
  width: 100%;
  zoom: 3;
}

6. build 之后 vendor-async.js 因为vue-video-player.js 占用过大

解决办法：

参考 https://www.cnblogs.com/shenjp/p/12066405.html

7. QQ，微信二次分享相关问题

参考：https://www.cnblogs.com/shenjp/p/11862581.html

8. 富文本图片懒加载

参考：https://zzzmh.cn/single?id=13

 

持续更新中。。。