移动端常见兼容性问题及解决办法

  1. 当使用transform:translate3d(-50%,-50%,0)居中弹框(div)时,在pc端,内部的文字会模糊。
    解决办法:不使用transform,使用vertical-align,给要居中的元素设置一个兄弟元素,然后让这个兄弟元素宽度为1,高度为100%,透明度为。代码如下(参考element-ui弹框)
// html
<div class="el-message-box__wrapper">
          <div class="el-message-box">
         </div>
</div>

// css
.el-message-box__wrapper {
    z-index: 2001;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.el-message-box {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    width: 420px;
    border-radius: 3px;
    font-size: 16px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
  1. position:absolute/fixed;把一个按钮固定在页面的底部,在android系统中,当调用输入法时,该按钮会被顶起
    解决办法:使用媒体查询@media screen and (max-width:400px){}当页面高度小于某一个值时,给元素一个top值

  2. IOS系统调用第三方输入法时,系统无法监测到input的input、focus、change、blur事件
    解决办法:计算input值的length的长度,判断input的值是否变化

  3. 不同浏览器默认margin,padding不同。

*{margin:0;padding:0;}
  1. 不同浏览器的最小字体不同,有的是10px,有的是12px
    解决办法:设置字体时,不要小于12px,如果一定要小于12px,使用transform:sacle()进行缩放

  2. 透明度opacity
    解决办法:IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)

  3. 文字两端居中text-align:justify;text-align-last:just;在移动端不起作用
    解决办法:使用&#160;代替空格

  4. 使用url传参时,特殊字符无法识别?如"#"
    解决办法: 传参时,使用encodeURIComponent(url)转义,解析url用
    decodeURIComponent(url)

  5. 删除cookie时,domain和path必须要匹配上,否则删除不掉;设置cookie时,也建议设置domain和path

  6. IOS300ms的点击延迟?

  7. 函数简写在移动端部分手机上不支持?
    当我们在使用vue进行开发时,会使用函数的简写,比如生命周期函数 created(){},但是这种写法在移动端不兼容,需要这样写 function(){}


未完,待续......
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,904评论 18 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • H5页面窗口自动调整到设备宽度,并禁止用户缩放页面//一、HTML页面结构 // width 设置viewp...
    tiandashu阅读 16,767评论 0 9
  • 关于css常见问题,大多是移动端的。 简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用...
    苏水儿阅读 5,054评论 0 9
  • 不忘初心演绎人生的下半场 --写给五十岁的自己 一 还记得年少时的梦吗?像朵永远不凋零的花,...
    张风雨阅读 1,140评论 0 7