當使用@media（width/height/background-size）進行縮放時，Safari不計算rem單位。

Question

當在css中使用rem作爲單位時，縮放在Safari（包括PC和Mac）中不起作用。

實施例位於http://jsfiddle.net/L25Pz/3/

標記：

<div> 
    <img src="http://www.google.com/images/srpr/logo3w.png" /> 
    <p>Lorem ipsum dolor sit amet</p> 
</div> 

CSS：

html { font-size:62.5% } 

div { background:url(http://www.google.com/images/srpr/logo3w.png); background-size:275px 95px; background-size:27.5rem 9.5rem; background-repeat:no-repeat; } 
img { width:27.5rem; height:9.5rem; } 
p { font-size:5rem; } 

@media only screen and (max-width: 500px) { 
    html { font-size:50%;} /* should render everything * 0.8 */ 
} 

...呈現在275px * 95px尺寸的圖像時，瀏覽器窗口大於600px - 在所有瀏覽器中。此外，當觸發媒體查詢時，圖像和背景會將其寬度和高度調整爲220px * 76px。

但 - 使用Safari，寬度和高度設置爲247px * 75px。這不是* 0.8，它是別的......

另一方面，段落的字體大小被正確渲染：40px當掛鉤查詢。

如果你問我，你會感到奇怪。 任何人都有解決方案？

Answer 1

您需要設置-webkit-text-size-adjust到none否則的webkit將擴大字體大小爲可讀大小：

@media only screen and (max-width: 500px) { 
    html { font-size:50%; -webkit-text-size-adjust:none; } /* should render everything * 0.8 */ 
}