Cihaz yönüne bağlı olarak görüntüleri değiştirme

Question

Yerel bir şirket için PhoneGap kullanarak temel bir web uygulaması yapıyorum. Uygulamanın üst kısmında başlık/banner için iki resim oluşturdum. Biri portre yönlendirmesi için optimize edilmiştir ve biri manzara için optimize edilmiştir. Cihazın hangi yönde tutulduğuna bağlı olarak birini gösterebilmek istiyorum. JQuery mobile benim için işlevselliğin geri kalanıyla ilgileneceğinden, medya sorguları hakkında ve açıkçası benim ihtiyaçlarım için karmaşık bir şekilde biraz daha karmaşık bir şekilde çalışıyordum ve tüm App için sadece bir CSS kullanıyorum.

Bu sorunun çözülmesine yardımcı olması için ekleyebileceğim birkaç basit kod satırı var mı?

Answer 1

Sen dikey ve yatay yönler için CSS medya sorgularını kullanabilirsiniz, hiç karmaşık değil:

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

herhangi yönlendirme için background-image geçersiz kılabilir bu medya sorguları kullanma.

Resmi belgeler: http://www.w3.org/TR/css3-mediaqueries/#orientation

onu kullanmanın iki yolu vardır:

Presume sınıfta header ile <div> var:

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

Alternatif olarak, <img> etiketlerini kullanmak isteyebilir. Bu durumda bunlardan ikisine ihtiyacınız olacak ve CSS kurallarına sahip olan sadece bir tane gizleyeceksiniz/gösteriniz. <img> etiketler sırasıyla sınıfları header-land ve header-portrait var diyelim:

@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

Bu medya sorgusu nasıl kullanılacağı hakkında bir cevaptır, bu sorunu çözmek için oldukça kolay bir yoludur. Ama bir önkoşul o css arka planı olarak resim göstermek için ok değil <img ... /> olarak

.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); 
}