移动端和微信小程序有哪些兼容性问题？

1. safari浏览器字体不能自动随网页缩放调整大小 -webkit-text-size-adjust:100% 2. 点击<button><input>有灰色透明背景 -webkit-tap-highlight-color:rgba(0,0,0,0); 3.微信、QQ内置浏览器视频自动全屏 非腾讯域名的视频地址都会 4.iphoneX默认网页显示在安全区域内，不全屏 <meta name="viewport" content="viewport-fit=cover"> 5.flex布局不兼容，加上前缀也不行（常见于华为或旧版iOS） display: -webkit-box; display: box; display: -webkit-flex; display: flex; 须声明box和flex两种。 6.Android设置line-height有偏移不垂直居中 原因：1. 字体不是偶数 2. 用rem单位 解决方案： 1. 字体变大 2. 增加父元素，设置diaplay: table-cell; vertical-align: middle 3. 元素放大两倍，再缩小 4. line-height: 1; 用padding-top撑起父元素。 5. 用px单位 6. 用图片去显示 7.iOS默认不可点击元素点击事件失效 当委托给一个元素添加click事件时，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的(如 div, span 等)，此时 click 事件会失效 解决方案： 将 click 事件直接绑定到目标元素(即 .target ) 上 将目标元素换成 <a> 或者 <button> 等可点击的元素 给目标元素添加一个空的 onclick=""(<div class="target" onclick="">点击我!</div>) 把 click 改成 touchend 或 touchstart（注意加上preventDefault） 将 click 元素委托到非 document 或 body 的父级元素上 给目标元素加一条样式规则 cursor: pointer; 最后一种解决方案最简单，推荐。 8. 部分移动端浏览器不支持space-evenly 解决方案： 用space-arround代替，或通过设置宽度、margin等布局 9. 移动端（尤其是iOS）一些浏览器具有下拉回弹效果，fixed定位元素不跟着下拉 解决方案： a. 放弃fixed定位 b. 如导航栏等要实现固定于顶部效果，无需跟着下拉，则用fixed定位 10.微信小程序中，textarea、input元素的maxlength不一定生效。 解决方案： 监听text.length，手动改变文本长度。 11.微信小程序中，输入文字时，输入法待选文字的长度会被计算在内。 解决方案： 1. 已输入文字的长度取实际长度和限制长度的最小值。 2. 传给接口的文本用splice剪切需要的长度。 12.iOS手机，微信小程序遮罩、picker组件会被穿透，页面上有多个picker组件时，可能在选择选项时触发其他picker组件弹出。 解决方案： 限制每次只能弹出一个picker，某个picker弹出时，其他picker都是disabled状态，点击无反应。 13.微信小程序，<scroll-view>元素如果用动态生成，则不会触发原生的trigger方法。 14.微信小程序，textarea多行输入框组件，键盘弹出会遮挡输入框。 解决方案： 设置cursor属性，指定光标与键盘的距离。 15.overflow:hidden在手机上失效 在移动端，给body,html设置overflow:hidden后，仍然有滚动条。 浏览器解析<meta name="viewport">标签会忽略body,html的overflow属性。 解决方案： html,body{ overflow:hidden; } body下加一个wrap， .wrap{ overflow:hidden; position:relative;/* 重点 */ } html,body就没有滚动条了。