兼容问题
1、iconfont 字体在钉钉应用里面加载不出来（或者是乱码）的问题引入iconfont字体的时候，需要按照顺序把字体依次引入。正确的顺序如下：
@font-face { font-family: "djicon"; src: url('./iconfont.eot'); /* IE9*/ src: url('./iconfont.svg#iconfont') format('svg'), /* iOS 4.1- */ url('./iconfont.woff') format('woff'), /* chrome、firefox */ url('./iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ } // 参考文档：https://www.cnblogs.com/Megasu/p/4305116.html
2、PC端ueditor 编辑的文案及图片拉伸问题，背景是 后端返回是html片段
node - cheerio模块，操作dom字符串比较方便，实际案例：
解决了 PC端图片在移动端展示的问题参考文档：
width: number = 784 代表pc端宽度 regHtml(str: string){ // 参数是html片段 let _this = this; const $ = cheerio.load(str); $('img').each(function(index,element){ let attr = element.attribs //元素的属性 // 屏幕宽度 let docEl = document.documentElement let clientWidth = docEl.clientWidth if(attr.width){ //如果设置了宽 // 图片宽度/屏幕宽度的比例 let rate = attr.width /_this.width //图片的宽高比例 let wh = attr.width/attr.height $(element).attr('height', _this.rate*clientWidth/wh) $(element).attr('width', _this.rate*clientWidth) $(element).attr('style', '') $(element).attr('class', 'img-skew') } }) return $.html() }
3、IOS 点击input不聚焦问题。
ios系统中点击Input输入框，没有反应，无法聚集光标，调不起键盘。
解决方案：强制性给加上点击事件，点击后给input框聚集光标。
cilckTextarea(){ document.getElementsByClassName('cont-inp')[0].focus(); },
4、上传图片，iPhone7 iPhone7p在上传图片的时候，传不过去图片的name
解决方案：手动添加图片name
let data = new FormData(); data.append("fileName", file[0],file[0].name);
5、ios微信打开网页键盘弹起后页面上滑，导致弹框里的按钮响应区域错位
解决方案：手动把滚动条滚到底部写一个自定义指令。
import Vue from 'vue'; Vue.directive('blur', { 'bind'(el) { el.addEventListener("click", function(){ window.scrollTo(0,0); }) } }); //在点击页面提交按钮的时候，把滚动条滚到底部就OK了
6、微信浏览器调整字体后，页面错位。
解决方案：阻止页面字体自动调整大小
// 安卓： (function() { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { if (document.addEventListener) { document.addEventListener("WeixinJSBridgeReady", handleFontSize, false); } else if (document.attachEvent) { //IE浏览器，非W3C规范 document.attachEvent("onWeixinJSBridgeReady", handleFontSize); } } function handleFontSize() { // 设置网页字体为默认大小 WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 }); // 重写设置网页字体大小的事件 WeixinJSBridge.on('menu:setfont', function() { WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 }); }); } })(); //iOS： // ios使用-webkit-text-size-adjust禁止调整字体大小 body{-webkit-text-size-adjust: 100%!important;}
7、关于移动端样式兼容的问题
- 设置meta标签viewport属性，使其无视设备的真实分辨率，直接通过dpi，在物理尺寸和浏览器之间重设分辨率，从而达到能有统一的分辨率的效果。并且禁止掉用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
- 使用rem进行屏幕适配，设置好root元素的font-size大小，然后在开发的时候，所有与像素有关的布局统一换成rem单位。
8、iOS下取消input在输入的时候英文首字母的默认大写
<input type="text" autocapitalize="none">
9、禁止 iOS 识别长串数字为电话
<meta name="format-detection" content="telephone=no" />
10、禁止ios和android用户选中文字
-webkit-user-select: none;
11、一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发
只需要对不触发click事件的元素添加一行css代码即可：
cursor: pointer;
