iOS打破背景大小

Question

我試圖創建幾個標記的圖像，將伸展或縮小，以匹配它的內容的長度。這適用於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); 
    } 
    }