1. 尽量强制使用webkit内核，一些垃圾又自信的浏览器厂商可能会用自己改装的浏览器内核来承载页面，结果造成某些视频只在该浏览器无法解析，某些样式解析不正常，越改越垃圾，所以能用webkit内核的尽量强制使用，加在head上
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
2. 开发使用viewport
写法1：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
这种写法需要用rem或者vw适配。
写法2:
还有一种viewport写法是，假设设计稿给的是750px宽度的，直接写width=750，按照原尺寸写。在不同的手机上，整体页面会自动缩放，不怎么需要适配，唯一要担心的是移动端引用组件的适配
<meta name="viewport" content="width=750, user-scalable=no, viewport-fit=cover">
比如使用了阿里的 antd-mobile，那就需要根据文档来适配了
image.png
这里在自己的less里面定一个@hd的变量，值为2px，或者自己上下调一下
3. 视频播放器video标签劫持问题
ios上的原生video标签的播放器样式和交互全部一致，没什么问题。
问题出在安卓端，安卓端的浏览器厂商会劫持video标签，然后使用系统自带的播放器进行播放，各个安卓机，浏览器厂商都私自劫持，导致播放器样式多种多样。如果项目里面有遮罩层或者蒙层，会发现播放器的层级会盖住浏览器的页面，系统级别的播放器层级比浏览器还要高，页面上下滚动的时候，会盖住内容，无法解决。甚至有些厂商会往video里面植入广告，会在你播放完或者暂停的时候，播放他们自己的广告。暂无解决方案
4.video标签pc和移动端表现不一致
video标签，如果不设置poster，会自动取视频第一帧作为封面，PC端是这个逻辑，并且MDN上也这么解释了，未指定，则使用第一帧作为封面
image.png
移动端上表现则是直接黑屏，并不遵循这个逻辑，暂时解决方案是之前写的一篇文章，模拟一下封面，https://www.jianshu.com/p/86acb8101459
5 安卓端某些浏览器视频无法播放问题，以及qq浏览器对video设置了currentTime导致无法播放问题，参考下 https://www.jianshu.com/p/67cb51c6d06c
6. 多行文本超出，省略号
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
超出3行则展示省略号，但是在某些安卓浏览器上不生效，网上查了一下说是-webkit-box-orient属性，会在webpack打包的时候被移除，需要加 /* autoprefixer: off */ 这种注释来避免移除。
但是我的项目里面没有用autoprefixer，并且其他浏览器里面是正常的，所以一定不是webpack移除的问题。
后来排查到，是设置了高度的问题，把height取消掉，就正常了，但是需求里面是需要定高的，即便一行也要固定那么高，所以在外面套一层div去定高，overflow：hidden，里面内容不定高，能解决大部分问题，还有某些小众机型，就得自己调一下line-height来适应了
7. 页面跳转问题
比如说从列表页，跳到详情页，按浏览器的返回键，需要跳回列表页，并且保持原来的滚动条进度，这个在列表页直接用window.open，self去跳即可，在移动真机上，用a标签或者window.open self，跳转后的页面，好像是有缓存还是怎么的，连滚动条进度和数据都能自动保存住，但是用电脑模拟的移动端没有这个效果
网友评论