html - iOS打破背景大小

Question

我正在尝试创建几个标记图像，这些图像会拉伸(stretch)或收缩，以匹配其内容的长度。这适用于除 iOS 上的任何浏览器之外的所有浏览器，例如 iPhone 和 iPad。

请参阅下面的图像链接，了解它在 iPad 上的表现(上面标记的图像)以及它应该的表现(以及在 Windows 和其他浏览器上)。

有人知道这个问题的修复方法，或者知道为什么这只发生在 iOS 上吗？

&:after {
      content: '';
      position: absolute;

      top: -5px;
      left: -10px;
      width: 100%;
      height: 47px;
      z-index: -1;
      background-size: 100% 47px;
      @include bg-retina('~img/layout/block-subtitle-light-blue', 'png', 158px, 47px);
    }

Answer 1

我已经解决了这个问题。

通过媒体查询确定它是否是视网膜显示器。

$retina: 'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)';

&:after {
    content: '';
    position: absolute;

    top: 5px;
    left: 0;
    width: 0;
    height: 36px;
    display: block;
    opacity: 0;
    z-index: -1;
    transition: width ease .4s, opacity ease .4s;
    background: url(~img/layout/menu-hover.png) 0 0 / 100% 36px repeat-x;

    @media #{$retina} {
      background-image: url(~img/layout/menu-hover@2x.png);
    }
  }