सफारी @media (चौड़ाई/ऊंचाई/पृष्ठभूमि-आकार)

Question

के साथ स्केल करते समय रिम इकाइयों को सही गणना नहीं करता है, जब सीएसएस में इकाइयों के रूप में रिम ​​का उपयोग करते हैं, स्केलिंग वास्तव में सफारी (पीसी और मैक दोनों) में काम नहीं करती है।

उदाहरण पर स्थित http://jsfiddle.net/L25Pz/3/

मार्कअप:

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

सीएसएस:

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 के आकार में एक छवि renders जब ब्राउजर विंडो 600px है - सभी ब्राउज़रों में। साथ ही, मीडिया क्वेरी को ट्रिगर करते समय, छवि और पृष्ठभूमि इसकी चौड़ाई और ऊंचाई को 220px * 76px तक समायोजित करती है।

लेकिन - सफारी का उपयोग करके, चौड़ाई और ऊंचाई 247px * 75px पर सेट है। जो * 0.8 नहीं है, यह कुछ और है ...

दूसरी तरफ अनुच्छेद का फ़ॉन्ट आकार सही ढंग से प्रस्तुत किया जाता है: क्वेरी पर लगाए गए 40px।

यदि आप मुझसे पूछें तो ताकतवर अजीब। किसी के पास कोई समाधान है?

Answer 1

आप none वरना वेबकिट को -webkit-text-size-adjust स्थापित करने के लिए एक पठनीय आकार के लिए फ़ॉन्ट आकार पैमाने जाएगा की जरूरत है:

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