移动端开发遇到的一些兼容性问题缺点: 安卓与低版本IOS不适用,未来也许能够兼容. 可通过apearance:none重

移动端开发遇到的一些兼容性问题

1、解决retina屏幕下一像素border的bug

(1) :after或者:before伪类的缩放实现

/*单条border样式*/
@mixin border-1px ($color, $direction,$borderWidth) {
  &:before{
    content: '';
    position: absolute;
    background: $color;
    pointer-events: none; /* 防止点击触发 */
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    // border: $borderWidth solid $color;
    @media screen and (-webkit-min-device-pixel-ratio: 2){
        width: 200%;
        height: 200%;
        transform:(scale(0.5));
        transform-origin: 0 0;
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3){
        width: 300%;
        height: 300%;
        transform:(scale((0.33)));
        transform-origin: 0 0;
    }
  }
}
  
  /*四条border样式*/
  @mixin all-border-1px ($color, $radius,$borderWidth) {
    &:before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      border: $borderWidth solid $color;
      border-radius: $radius;
      box-sizing: border-box;
      pointer-events: none; /* 防止点击触发 */
      width: 100%;
      height: 100%;
    @media screen and (-webkit-min-device-pixel-ratio: 2){
      content: "";
      pointer-events: none; /* 防止点击触发 */
      box-sizing: border-box;
      position: absolute;
      width: 200%;
      height: 200%;
      border-radius: $radius*2;
      border: $borderWidth solid $color;
      transform:(scale(0.5));
      transform-origin: 0 0;
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3){
      content: "";
      pointer-events: none; /* 防止点击触发 */
      box-sizing: border-box;
      position: absolute;
      width: 300%;
      height: 300%;
      border-radius: $radius*3;
      border: $borderWidth solid $color;
      transform:(scale(0.33));
      transform-origin: 0 0;
    }
  }
}

(2)利用小数实现

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

如果使用less/sass的话只是加了1句mixin

缺点: 安卓与低版本IOS不适用,未来也许能够兼容.

其他办法暂时没试过,具体请参考https://www.cnblogs.com/lunarorbitx/p/5287309.html

2、设置line-height与height相同,在安卓下无法居中的bug

(1)、可通过设置table方式实现

<div class="container">
    <button class="btn"></button>
</div>
<style>
    .container{
        display: table;
    }
    .container .btn{
       display: table-cell; 
    }
</style>

(2) 利用缩放scale

3、ios下button带有默认样式

可通过apearance:none重置默认样式。

4、ios使用new Date（）格式化带有‘-’的时间格式，会出现NAN的bug,如new Date('2019-04-14 14:12:10')

解决办法：利用str.replace(/-/g,'/');

5、内容少时footer固定在底部

Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <style>
        * {
        margin: 0;
    }
     
    html, body {
        height: 100%;
    }
     
    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -4em;
    }
     
    .footer, .push {
        height: 4em;
    }
    </style>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
            
        </div>
 
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
 
    </body>
</html>

6、解决移动端下图片模糊的问题


/* 根据dpr显示2x图/3x图 */
@mixin bg-image($url,$type) { 
    background-image: url($url + "@2x." + $type);
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
      background-image: url($url + "@3x." + $type);
    }
}

移动端开发遇到的一些兼容性问题