移动端开发问题记录
记录本地项目开发过程中,遇到的问题。
本次项目开发,使用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像素的空隙
原因是:富文本在每个标签后面会有回车,标签之间还有大量的空格,根据张大大的提示,把所有元素写到一行就能解决
解决办法:
// 过滤所有的换行符和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
持续更新中。。。