एंड्रॉइड ब्राउज़र छवि

Question

साइट मैं is currently live के बारे में बात कर रहा हूं। यह मेरे लिए काफी अच्छा काम करता है। केवल एक गलती है जो मुझे पागल बनाती है:

मानक एंड्रॉइड ब्राउज़र (4.1.2, एलजी पर परीक्षण), लोगो को बहुत खराब तरीके से बढ़ाया और आकार दिया गया है। आप नीचे एक डेमो देख सकते हैं।

स्थिति के लिए सीएसएस और लोगो आकार, काफी सरल है एक position: fixed तत्व पर position: absolute का उपयोग कर:

मार्कअप

<div class="fixed"> 
    <div id="logo"> 
     <a href="logo-link"> 
     <img src="logo.jpg" height="55" width="34"> 
     </a> 
    </div> 
</div> 

सीएसएस:

* {box-sizing: border-box} /* bootstrap system */ 

.fixed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: auto; 
    bottom: auto; 
    height: 85px; 
} 

.logo { 
    width: 85px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: auto; 
    bottom: auto; 
} 

img { 
    margin: 20px 27px; 
    max-width: 40px; 
    height: auto; 
    display: inline-block; 
} 

Answer 1

मेरा एफएफ DE44 + इंस्पेक्टर कहता है कि माता-पिता <a> आकार 0x24 और <img> आकार 240x164 (जो इनलाइन मान हैं)। माता-पिता के पास z-index नहीं है जबकि छवि में z-index: 1500 है।

ऐसा लगता है कि एंड्रॉइड ब्राउज़र में कोई चौड़ाई और ऊंचाई पैरेंट मान नहीं है, जबकि bottom: auto और right: auto इसे करने के लिए मजबूर करता है।

और भी, 'लाइव' साइट के कोड को देखते हुए आप इसके प्रश्न में दावा करने के मुकाबले कहीं अधिक हैं, क्योंकि आप छोटी छवि के मूल्य देते हैं लेकिन बड़े के सीएसएस (जो भी है left: auto, जबकि छोटे के पास कोई नीचे नहीं है, बाएं, ठीक है)।

आप अपने कोड पर एक और अच्छी नजर डालें और 'लाइव' संस्करण के कोड को प्रतिबिंबित करने के लिए अपने प्रश्न में कोड को संशोधित करें, अन्यथा हम आपकी मदद करने में सक्षम नहीं होंगे।

Answer 2

काम करना अंधेरा क्योंकि मेरे पास वह ब्राउज़र नहीं है, लेकिन मुझे संदेह है कि यह मुद्दा सही होगा: ऑटो तल: ऑटो।

.fixed { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 85px; 
} 

#logo { 
    width: 85px; height:85px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color:pink; 
} 
#logo a { display:block; width: 85px; height:85px; } 

img { margin:15px 25px; } 

चूंकि चौड़ाई ज्ञात है, तो वास्तविक संख्याओं के साथ ऑटो को बदलने का प्रयास करें। https://jsfiddle.net/mnkx66zj/

तुम भी लोगो लिंक प्रदर्शन ब्लॉक बनाकर अपने लिंक पर क्लिक करने योग्य क्षेत्र में वृद्धि, और यह माता पिता के आकार के बराबर बनाना चाहते चाहिए:

यहाँ एक फिडल है।