问题名称	问题描述（最好附有截图）	解决方案	涉及项目	终端
多行文本溢出时变为省略号移动端兼容性问题	多行文本溢出时变为省略号，在移动端出现省略号的那一行会露出下一行文字的头部	思路： 使用after伪元素遮盖露出的部分 代码： &:after { position: absolute; content: ‘’; bottom: 0; height: 1.5px; width: 100%; background: #fff; left: 0; }	driver-repair	移动端
H5图片拼接会出现1px的间隙	H5图片拼接时，即使设置了图片img display: block，或者采用其他方式解决img baseline的问题，部分机型上，还是会在图片下方出现1px的间隙，如图 使用chrome移动端模拟器打开，使用iphone6/7/8模拟：https://mobile.caocaokeji.cn/offical/market/bd-register/index?bd_source=Btanchuang	该问题是机型或者不同容器的兼容性问题，解决方案： margin-top：-1px https://segmentfault.com/q/1010000011417835	offical	移动端（三星、华为p20等机型的默认浏览器）
placeholder无法垂直居中	placeholder和input的字体不一致时，placeholder的位置在钉钉里面偏上		offical	移动端
前端pdf下载/展示问题	pdf需要支持预览，ios可以直接预览，android打开直接下载	维持原状，将pdf转化为图片展示，除非后端直接给图片格式，否则不建议前端自己转图片展示		ios/android
iphone xsmax webview 底部白条隐藏	最下面有白色区域	原生处理 H5处理不了，需要原生对webview进行处理	jc-driver 众悦司机端	ios xsmax
移动端打开pc端地址自动识别移动端跳转到移动端版本	如果纯js判断，会跳转两次，用户体验效果不佳，但是前端可控性高，nginx配置的话只会跳转一次，用户体验效果佳，可控性差	1.js判断： if (/Android|webOS|iPhone|iPod|BlackBerry|ipad|IEMobile|Nexus/i.test(window.navigator.userAgent)) { let hostname = ‘’; switch (window.location.hostname) { case ‘test33hermes.caocaokeji.cn‘: hostname = ‘https://test33mobile.caocaokeji.cn‘; break; case ‘test44hermes.caocaokeji.cn‘: hostname = ‘https://test44mobile.caocaokeji.cn‘; break; case ‘test55hermes.caocaokeji.cn‘: hostname = ‘https://test55mobile.caocaokeji.cn‘; break; case ‘stablehermesweb.caocaokeji.cn‘: hostname = ‘https://stablemobile.caocaokeji.cn‘; break; case ‘vipcaocao.com‘: hostname = ‘https://mobile.caocaokeji.cn‘; break; default: hostname = ‘https://mobile.caocaokeji.cn‘; } window.location.href = ${hostname}/offical-mobile/offical/index${window.location.search}; } 2.nginx判断 （需先上传mobile.check文件） location = / { include /usr/local/nginx/conf/conf.d/mobile.check; if ($mobile_rewrite = perform){ return 301 $scheme://m.caocaokeji.cn$request_uri; } }	绿色公务官网	pc端，移动端
chrome请求遇到证书错误问题	服务器证书过期或者某些原因的错误，导致接口无法正常请求	1.桌面必须要有Chrome 快捷方式 2.进入快捷方式属性 3.修改目标为：”C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” —ignore-certificate-errors —allow-running-insecure-content 空格后加上后面那段就可以了　 4.平常时建议正常使用Chrome	埋点组件cc-analysis	chrome 7或其他个别浏览器
ios12+版本会出现输入框被键盘遮挡住的问题	用xcode10.1打包的app，在ios12+版本会出现输入框被键盘遮挡住的问题，且无法上下滑动	解决方案： 在靠近页面底部的input输入框，获得焦点时把页面高度设置大一些，同时用scrollIntoView方法, 失去焦点时在设置回去，如 document.querySelector(‘#page’).style.height = ‘9999px’; setTimeout(() => { document.querySelector(‘#inputId’).scrollIntoView(); }, 100); 兼容性不好，慎用	passenger-main	ios 12+
H5调起系统电话	H5调起系统电话，可以用html a标签调起；如果需要在调起电话前增加逻辑，则可使用js动态调起，window.location.href=’tel:10086’	第一种方案：xxx 第二种方案：window.location.href=’tel:10086’	offical pay-travel	任何移动端场景
android hybrid开发时，H5调起键盘不在可视区域	android hybrid开发时，H5调起键盘，键盘不在可视区域	https://github.com/XuZhongqiang/bubble-input		android
圆角border-radius值为50%安卓各版本会变形	在H5页面通过css样式设置圆角，比如border-radius：50%，这样的方式，在不同的安卓浏览器里，其表现的形式也会有不一样，会出现大小不一致，有些扁圆，有些大，有些小，但是在IOS系统不会出现问题	在android系统上，vw rem em可能有兼容性问题，遇到该问题，可替换成图片 https://blog.csdn.net/lilinoscar/article/details/80539725		android

translate	translate在android4.4.x的有些机型上不兼容vw	建议使用百分比来做translate偏移	android4.4.x
fixed定位	fixed定位在ios下会有问题，特别是有输入框，有弹层的时候	建议用absoulte	ios
人民币符号	直接用‘￥’有些安卓手机会显示一横	建议用‘¥’	android全版本
圆角	android和ios低端手机当border和boder-radius一起设置是出现问题	建议不要一起设置	android和ios低版本
ios点击无效问题	在ios下如果使用事件委托，并且该元素是默认不能点击的（div，span）等，click事件无效	加入cursor：pointer；或者改用touch事件	ios
避免使用inline-block	inline-block在安卓端表现不一致，导致对齐有问题	使用flex布局来对齐	android
ES6、ES7api和语法兼容性	脚手架中使用babel-plugin-transform-runtime可以编译ES6,ES7的语法,现已测试promise,async-await,generator,module,let-const,解构赋值;但不能编译全局对象ES6,ES7提供的api,如String-includes, Array-includes,Object-assign,	如果要用到ES6,ES7的api那么在caoh5-polyfill中引入core-js/*相应的模块	Android4.4.4, iOS7
toLocalDateString()	该方法会在ios9和部分安卓机型上返回 2017年12月14日 而不是 2017/12/14	自己重写一个类似方法，不要用该方法来字符串化时间	IOS9 ，低端安卓机
需要一直浮动在H5头部	在ios上弹出键盘会把整个页面往上推，并且会缩小页面导致头部超出屏幕。	建议不要有浮动在h5头部这种设计	ios
formdata兼容性	formData在4.4版本转化时会把null变成’’	建议换一种方式	安卓
ios点击元素灰色背景问题	当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景	-webkit-tap-highlight-color: rgba(0,0,0,0);	IOS
H5容器title	H5容器头部标题随着页面的切换而更改（UC、微信容器可以，钉钉无法更改）
1px问题	1px在移动端默认实现很粗	可以采用伪元素transform或者不加meta width=device-width
input readonly出现光标	input在iphone6（ios11）的设置readonly属性点击仍会出现光标	在input属性中添加onFocus={() => { this.refs.city.blur(); }} 方法	ios
input placeholder无法垂直居中	ios placeholder不垂直居中	line-height: normal;	ios
数字被识别为手机号	数字被识别为手机号，变为蓝色		ios
new date(‘xx-xx-xx’)转换	new date(‘xx-xx-xx’)以中划线隔开的时间字符串格式有兼容行问题，并且时间格式如果以/隔开在带有毫秒数的情况下，依然有兼容性问题	去除毫秒数并且将中划线转为‘/’	ios
input type=”number” maxLength失效	input type=”number” maxLength失效	input type=”tel”	ios/android
input 调起数字键盘	input type=”number” 可以调起数字键盘，但是ios需要pattern	type=”tel” pattern=”\d*”	ios/android
呼出键盘内容错位	呼出键盘内容错位	(谨慎使用，仅局部使用，不要大范围使用) position:absolute、fixed会被键盘顶起，使用relative const h = document.body.scrollHeight; window.onresize = () => { if (document.body.scrollHeight < h) { this.setState({ display: ‘none’, }); } else { this.setState({ display: ‘block’, }); } };	ios/android
用滤镜fiter 做高斯模糊问题	在ios手机上表现不一致，且在有键盘的时候 部分ios输入卡顿	使用的时候尽量测试完全	ios
border 1像素	css设置1px但是渲染出来并不是1px的效果 这个方案需要灵活一些，更改scale的方向（x轴还是y轴）	&::before { position: absolute; bottom: -14.5px; left: 0; display: block; width: 100%; height: 1px; background: #e5e5e5; transform: scaleY(.5); transform-origin: top; content: ‘’; }	ios/android
ios 12输入框被遮挡问题	用xcode10.1打包的app，在ios12版本会出现输入框被键盘遮挡住的问题，且无法上下滑动	在靠近页面底部的input输入框，获得焦点时把页面高度设置大一些，同时用scrollIntoView方法, 失去焦点时在设置回去 如 document.querySelector(‘#page’).style.height = ‘9999px’; setTimeout(() => { document.querySelector(‘#inputId’).scrollIntoView(); }, 100);	只针对自己的APP xcode10 打包的 ios12
安卓jsBridge触发延迟问题	安卓触发jsBridge时，会延迟一段事件才执行	安卓是通过监听WebViewJavascriptBridgeReady事件再来执行相应的bridge方法，但是这个事件会被异步请求阻塞（fetch、xhr、iframe等等）。 解决方法：在调用jsBridge前先中断请求；或者请求置后	安卓
android localStorage为null	如果android的webview不设置mWvContent.getSettings().setDomStorageEnabled(true); 会导致localStorage为null	设置mWvContent.getSettings().setDomStorageEnabled(true); 兼容safari无痕模式storage	android
ios12.3版本后台执行问题	在h5中通过schemaUrl打开app，延时一段时间后打开app store，正常逻辑是打开app后，页面进入后台不会继续打开appstore,但是ios12.3版本有问题。当延时设置为5s时，现象：app打开—>App Store打开并覆盖app；当延时设置为20s时，现象：app打开—>App Store不会打开—>返回H5页面app store打开；		iOS