移动端H5常见兼容问题

1px边框的问题：

　　上边框或者下边框 用transform：scaleY|scaleX(0.5);

　　四个边框的情况 圆角需要加背景颜色，父子级元素加圆角属性

border-radius: 50% 安卓手机兼容问题

　　在安卓手机border-radius:50% 不是全圆 把rem宽高改为px 或者把rem的值先放大一倍再用scale缩小可以解决

　　android自带浏览器不支持% 如果兼容我们只能使用一个比较大的值border-radius：999px

　　android背景色溢出 同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分，需要是使用           　　　　　　　　　　　　　　    background-clip: padding-box;来修复，但是如果border-color为半透明时，背景直角部分依然会露出来　　　　　　　　　　　　    关于背景剪裁background-clip css 代码: background-clip: border-box|padding-box|content-box; 值描述测试border-        box背景被裁剪到边框盒。测试padding-box背景被裁剪到内边距框。测试content-box背景被裁剪到内容框。测试          用box-shadow模拟边框 背景色溢出另一个解决办法就是使用box-shadow模拟border；差不多可以达到效果 比如          box-shadow: 0 0 1px 1px #333333; border: 1px solid #333333; 

　　css3用border-radius画出的圆在手机有毛边 给元素加overflow：hidden

ios端兼容input光标高度 ：

　　高度height和行高line-height内容用padding撑开

ios端微信h5页面上下滑动时卡顿、页面缺失

　　解决方式时 在公共样式加入-webkit-overflow-scrolling：touch

ios键盘唤起，键盘收起以后页面不归位

　　失焦的时候设置失焦函数调用 window.scrollTo scrollHeight -1；

安卓弹出的键盘遮挡文本框

　　----

ios和android下触摸元素时出现半透明灰色遮罩

　　可设置-webkit-tap-highlight-color：rgba(0,0,0,0)

ios默认输入框内阴影重置

　　E{

　　　　border：0；

　　　　-webkit-appearance：none；

　　}

旋转屏幕的时候，字体大小调整的问题

　　html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; }

IOS禁止保存或拷贝图像

　　长按图片保存场景下，禁止IOS默认识别图像行为

　　img { -webkit-touch-callout: none; }

IOS中input键盘事件调用缓慢

　　直接改为监听input事件 document.getElementById('test').addEventListener('input',fn,false);

页面高度渲染错误

　　document.documentElement.style.height = window.innerHeight + 'px';

取消input在ios下，输入的时候英文首字母的默认大写

　<input autocapitalize="off" autocorrect="off" />

原文：https://juejin.cn/post/6938219304991227912
来源：稀土掘金