डिवाइस अभिविन्यास

Question

के आधार पर छवियों को बदलना मैं स्थानीय कंपनी के लिए फोनगैप का उपयोग कर एक मूल वेब ऐप बना रहा हूं। मैंने ऐप के शीर्ष पर शीर्षलेख/बैनर के लिए दो छवियां बनाई हैं। एक पोर्ट्रेट अभिविन्यास के लिए अनुकूलित किया गया है और एक को परिदृश्य के लिए अनुकूलित किया गया है। मैं डिवाइस को आयोजित करने के तरीके के आधार पर या तो एक को दिखाने में सक्षम होना चाहता हूं। मैं मीडिया प्रश्नों के बारे में पढ़ रहा हूं और स्पष्ट रूप से मेरी जरूरतों के लिए जटिलता से थोड़ा सा है, क्योंकि JQuery मोबाइल मेरे लिए बाकी कार्यक्षमता का ख्याल रखेगा, और मैं केवल पूरे ऐप के लिए एक सीएसएस का उपयोग कर रहा हूं।

क्या किसी के पास इस समस्या को हल करने में सहायता के लिए कोड की कुछ सरल रेखाएं शामिल हैं? इन मीडिया के प्रश्नों का उपयोग कर आप किसी भी उन्मुखीकरण के लिए background-image ओवरराइड कर सकते हैं

@media screen and (orientation: portrait) { ... } 
@media screen and (orientation: landscape) { ... } 

:

Answer 1

आप पोर्ट्रेट और लैंडस्केप झुकाव के लिए CSS मीडिया क्वेरी का उपयोग कर सकते हैं, यह बिल्कुल जटिल नहीं है।

आधिकारिक प्रलेखन: http://www.w3.org/TR/css3-mediaqueries/#orientation

वहाँ इसे का उपयोग करने के दो तरीके हैं:

आशा है की आप वर्ग header साथ <div> है:

@media screen and (orientation: portrait) 
{ 
    div.header { background-image:url(image1.jpg); } 
} 
@media screen and (orientation: landscape) 
{ 
    div.header { background-image:url(image2.jpg); } 
} 

वैकल्पिक रूप से, आप <img> टैग का उपयोग करना चाह सकते हैं। इस मामले में आपको उनमें से दो की आवश्यकता होगी, और सीएसएस नियमों के साथ केवल एक को छुपाएं/दिखाएं। मान लें, <img> टैग क्रमशः कक्षाएं header-land और header-portrait है:

@media screen and (orientation: portrait) 
{ 
    .header-land { display:none; } 
    .header-portrait { display:inline-block; } 
} 
@media screen and (orientation: landscape) 
{ 
    .header-land { display:inline-block; } 
    .header-portrait { display:none; } 
} 

Answer 2

यह कैसे मीडिया क्वेरी का उपयोग करने के बारे में एक जवाब है, यह इस मुद्दे को हल करने के लिए एक काफी आसान तरीका है। लेकिन एक शर्त है कि यह सीएसएस पृष्ठभूमि के रूप में छवियों को दिखाने के लिए ठीक है, और नहीं <img ... /> रूप

छद्म कोड

.my-banner { 
    ...declarations like: 
    background-position: 
    border: 
    margin: 
    padding: 
} 
@media all and (max-width: 320px) { 
    .my-banner { 
    background-image: url(portrait.png); 
} 
@media all and (min-width: 321px) { 
    .my-banner { 
    background-image: url(landscape.png); 
}