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

Posted 2020-09-06 每天都要进步一点点

1. 当使用transform:translate3d(-50%,-50%,0)居中弹框（div）时，在pc端，内部的文字会模糊。
   解决办法：给body定义样式

   body{
        font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
   }

2. 用position:absolute/fixed;把一个按钮固定在页面的底部，在android系统中，当调用输入法时，该按钮会被顶起
   解决办法：使用媒体查询@media screen and (max-width:400px){}当页面高度小于某一个值时，给元素一个top值

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

4. 不同浏览器默认margin，padding不同。

   *{margin:0;padding:0;}

5. 不同浏览器的最小字体不同，有的是10px，有的是12px
   解决办法：设置字体时，不要小于12px,如果一定要小于12px，使用transform:sacle()进行缩放
6. 透明度opacity
   解决办法：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)
7. 文字两端居中text-align：justify；text-align-last：just；在移动端不起作用
   解决办法：使用&#160；代替空格