आईओएस 7 रेटिना सीएसएस मीडिया प्रश्नों को अनदेखा कर रहा है - पृष्ठभूमि आकार

ऐप्पल ने अभी अपना नया आईओएस 7 ऑपरेटिंग सिस्टम जारी किया है, लेकिन यह मेरे रेटिना आइकन मीडिया प्रश्नों के साथ समस्याएं पैदा कर रहा है। ऐसा लगता है कि पृष्ठभूमि आकार की संपत्ति को अनदेखा किया जा रहा है। एक उदाहरण छवि यहां है: http://imgur.com/R3OgFgN आईओएस 7 रेटिना सीएसएस मीडिया प्रश्नों को अनदेखा कर रहा है - पृष्ठभूमि आकार

छवि प्रतिस्थापन आईफ़ोन 4, 4 एस, 5 आईओएस 6 और नीचे (किसी भी ब्राउज़र) पर पूरी तरह से काम करता है। iOS7 ब्राउज़रों उच्च रिज़ॉल्यूशन छवि हड़पने लेकिन पृष्ठभूमि आकार प्रॉपर्टी को नकारने के दिखाई देते हैं:

@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%; 
}

यह क्या करता है क्या;

@ 2x छवि के साथ मूल छवि बदलता

यह क्या नहीं करता है;

div तत्व आकार के लिए पृष्ठभूमि छवि फिट।

आईओएस 7 सफारी & क्रोम पर परीक्षण किया गया।

क्या किसी को भी यह समस्या है, और यदि ऐसा है तो आप इसे कैसे ठीक कर सकते हैं?

स्रोत

2013-09-23 andycrone

मैंने इसे हल किया! बाहर निकलता है, आईओएस 7 मीडिया क्वेरी चलाने पर पृष्ठभूमि आकार की संपत्ति रीसेट करता है। यह चाल पृष्ठभूमि आकार को सटीक पिक्सेल आयामों के साथ निर्दिष्ट करने के लिए या 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 - मैंने यह भी पाया महत्वपूर्ण टैग सहित यह सुनिश्चित किया कि सभी रेटिना उपकरणों क्वेरी ठीक से पढ़ Samsung S3 & एस 4 सहित!। का आनंद लें।

स्रोत

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-pixel- द्वारा ओवरराइड की गई है इस व्यवहार करता है अनुपात 'काम नहीं किया, हालांकि मैंने इसे दो प्रश्नों के बीच एक अल्पविराम डालने के लिए तय किया। यह अभी भी दोनों परिदृश्यों पर पृष्ठभूमि आकार की संपत्ति को पहचान नहीं रहा है। मैं इसे ठीक करने की कोशिश करता रहूंगा और आपको बताऊंगा कि मैं – andycrone

कैसे हल करता हूं @joydesigner – andycrone

यदि पृष्ठभूमि-आकार ठीक है, तो आप पृष्ठभूमि-आकार को निश्चित चौड़ाई के रूप में सेट कर सकते हैं, उदा। 'पृष्ठभूमि आकार: 200 पीएक्स' – joydesigner

यह छोटी गाड़ी का व्यवहार नहीं है। यह आपकी गलती है। आप सभी पृष्ठभूमि गुण यहां सेट:

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

आप पूरी तरह से सही हैं। कई सीएसएस संघर्ष चल रहे थे, लेकिन मुझे उम्मीद है कि यह दूसरों को समान अज्ञानता की समस्या निवारण में मदद कर सकता है;) – andycrone

यह मेरे लिए पूरा समाधान नहीं था, लेकिन बहुत धन्यवाद क्योंकि इससे मुझे मेरी समस्या हल करने में मदद मिली! सामान्य "पृष्ठभूमि:" लिखना संपत्ति बिल्कुल काम नहीं कर रही थी, लेकिन जैसे ही मैंने "पृष्ठभूमि-छवि", "पृष्ठभूमि-स्थिति", "पृष्ठभूमि-आकार" जैसे प्रत्येक को लिखा, !! – Ludovic

आईओएस 7 रेटिना सीएसएस मीडिया प्रश्नों को अनदेखा कर रहा है - पृष्ठभूमि आकार

उत्तर

संबंधित मुद्दे