iOS7忽略視網膜CSS媒體查詢 - 背景大小

蘋果剛剛發佈了他們的新iOS7操作系統，但它導致我的視網膜圖標媒體查詢問題。看起來背景大小的屬性被忽略。一個示例圖像在這裏：http://imgur.com/R3OgFgN iOS7忽略視網膜CSS媒體查詢 - 背景大小

圖像替換適用於運行iOS6及更低版本（任何瀏覽器）的iPhone 4，4s，5。 iOS7瀏覽器出現搶高清晰度的圖像，但忽略了背景-size屬性：

@media (-webkit-device-pixel-ratio: 2){ 
.b .logo{ 
    background: url(../img/2x/[email protected]) no-repeat 0 0 !important; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    background-size: 100%; 
}

它所做;

替換原始圖像與@ 2倍的圖像

什麼也不會做;

將背景圖像適合div元素的大小。

在iOS7上測試Safari & Chrome。

有沒有人有這個問題，如果是的話，你是如何設法解決它的？

來源

2013-09-23 andycrone

我解決了！原來，iOS7在運行媒體查詢時重置背景大小屬性。訣竅是指定具有精確像素尺寸的背景尺寸，或者像這樣具有100％的值;

@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){ 
     .logo{ 
      background: url(../img/2x/[email protected]) no-repeat 0 0 !important; 
      background-size: 100% !important; 
      width: 30px; 
      height: 40px; 
     }

N.b - 我還發現，包括重要標籤確保所有視網膜顯示設備上正確讀取查詢，包括三星S3 S4 &！請享用。

來源

2013-09-24 05:45:15 andycrone

不正確的答案。見下文。 – fisherwebdev

因爲這個例子是一個圖像。我無法檢查代碼。

你可以嘗試以下選項：

如果div的寬度和高度是固定的。您可以爲圖像設置固定的寬度和高度。視網膜顯示器通常也需要用於高分辨率顯示的「最小器件像素比」。

例如

@media (-webkit-min-device-pixel-ratio: 2) 
     and (min-device-pixel-ratio: 2){ 
.b .logo{ 
    background: url(../img/2x/[email protected]) no-repeat 0 0 !important; 
    width: 200px; 
    height: 100px; 
}

或者如果div不固定。

@media (-webkit-min-device-pixel-ratio: 2) 
     and (min-device-pixel-ratio: 2){ 
.b .logo{ 
    background: url(../img/2x/[email protected]) no-repeat 0 0 !important; 
    background-size: contain; 
}

請嘗試，如果這可以解決您的問題。

乾杯！

來源

2013-09-23 01:13:29 joydesigner

你的媒體查詢，包括「民deivce-像素 - 覆蓋比例'不起作用，但我確定它在兩個查詢之間留下一個逗號。它仍然不能識別兩種情況下的背景大小屬性。我會繼續嘗試解決這個問題，並讓我知道我該怎麼去 – andycrone

解決@joydesigner – andycrone

如果背景大小是固定的，您可以將背景大小設置爲固定寬度，例如， 'background-size：200px' – joydesigner

這不是buggy行爲。這是你的錯。在這裏您可以設置所有的背景屬性：

background: url(../img/2x/[email protected]) no-repeat 0 0 !important;

因此瀏覽器會將其視爲

background-image:url(../img/2x/[email protected]) !important 
background-position:0 0 !important 
background-repeat:no-repeat !important 
background-size:auto auto !important 
and so on

因此您的最後一行background-size: 100%;由background-size:auto auto !important;

來源

2013-10-06 18:25:10 ZavtraMen

你完全正確。有很多CSS衝突正在進行，但我希望這可以幫助其他人解決類似的無知問題;） – andycrone

這不是完整的解決方案，但非常感謝，因爲它幫助我解決了我的問題！寫一般「背景:;」財產根本不起作用，但只要我寫了每一個像「背景圖像」，「背景位置」，「背景大小」它工作！ – Ludovic

iOS7忽略視網膜CSS媒體查詢 - 背景大小

回答

相關問題