• 移动端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
    来源:稀土掘金
     
  • 相关阅读:
    Html 播放 mp4格式视频提示 没有发现支持的视频格式和mime类型
    如何防止网站短信验证码被攻击
    JS和C#.NET获取客户端IP
    H5案例分享:移动端touch事件判断滑屏手势的方向
    防止asp.net连续点击按钮重复提交
    JS正则表达式验证手机号和邮箱
    sql server查询数据库的大小和各数据表的大小
    大型分布式网站架构技术总结
    一个高逼格开发者必须理解的大型分布式网站的几点概念
    C# 在程序中控制IIS服务或应用程序池关闭重启
  • 原文地址:https://www.cnblogs.com/tipsydr/p/15512095.html
Copyright © 2020-2023  润新知