移动端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
来源:稀土掘金
 
原文地址:https://www.cnblogs.com/tipsydr/p/15512095.html