2013-09-23 66 views
2

蘋果新的iOS7操作系統它導致視網膜媒體查詢問題。ios7媒體查詢(視網膜背景大小)

圖像替換完美適用於運行iOS6及更低版本(任何瀏覽器)的iPhone 4,4s和5。 iOS7瀏覽器似乎抓取高分辨率圖像,但忽略背景大小的屬性。

我嘗試使用「(min-device-pixel-ratio:2)」,但不適用,因爲該應用顯示我們的非視網膜精靈?任何人有想法解決它?

@mixin sprite($x,$y, $spriteX: 32, $spriteY: 32, $imagePath: "sprites.png"){ 
    @include spriteHelper($imagePath, $x, $y, $spriteX, $spriteY); 
    @media (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio: 2) 
    { 
     $imagePath: "spritesx2.png"; 
     background-size: 500px 1760px; 
     @include spriteHelper($imagePath, $x, $y, $spriteX, $spriteY); 
    } 
} 
+1

'和'之間的前綴和前綴固定的像素是奇數。不應該是:'@media唯一屏幕和(-webkit-min-device-pixel-ratio:2),僅屏幕和(最小設備像素比:2){...}'? –

+0

@PaulRoub,絕對 - http://css-tricks.com/snippets/css/retina-display-media-query/ –

回答

2

謝謝!我用背景大小中的「!important」標記修復它

@mixin sprite($x,$y, $spriteX: 32, $spriteY: 32, $imagePath: "sprites.png"){ 
    @include spriteHelper($imagePath, $x, $y, $spriteX, $spriteY); 
    @media 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (-moz-min-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: 2dppx) 
    { 
     $imagePath: "spritesx2.png"; 
     background-size: 500px 1800px !important; 
     @include spriteHelper($imagePath, $x, $y, $spriteX, $spriteY); 
    } 
} 
+0

救了我一些痛苦,謝謝! – joemaller

相關問題