移动端适配总结

[preflower]

移动端适配相关

移动端1px问题

起因：不同的设备像素比不同；导致 1px 可能被多个物理像素渲染

@mixin border-1px($color) {
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    &::before {
      width: 200%;
      height: 200%;
      transform: scale(.5);
    }
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
    &::before {
      width: 300%;
      height: 300%;
      transform: scale(.33);
    }
  }

  position: relative;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid $color;
    transform-origin: left top;
    content: '';
  }
}

背景图片自适应

起因：提高用户体验，不同分辨率采用不同图片展示

background-image: image-set

使用background-image: image-set， 缺点兼容性太差

media + sass

@mixin background-image($url, $type: '') {
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    background-image: url($url+'@2x'+$type);
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
    background-image: url($url+'@3x'+$type);
  }

  background-image: url($url+$type);
}

[preflower]

关于 刘海屏适配方案探索

[preflower]

关于 链接分享到各个平台需要的配置

[preflower]

iOS 键盘难题与可见视口（VisualViewport）API