Thay đổi hình ảnh tùy theo hướng thiết bị

Question

Tôi đang xây dựng một ứng dụng web cơ bản bằng PhoneGap cho một công ty địa phương. Tôi đã tạo hai hình ảnh cho tiêu đề/biểu ngữ ở đầu Ứng dụng. Một được tối ưu hóa cho hướng dọc và một được tối ưu hóa cho cảnh quan. Tôi muốn có thể hiển thị một trong hai tùy theo cách mà thiết bị được giữ. Tôi đã đọc về các truy vấn phương tiện truyền thông và thẳng thắn một chút phức tạp hơn cho các nhu cầu của tôi, vì JQuery mobile sẽ chăm sóc phần còn lại của chức năng cho tôi và tôi chỉ sử dụng một CSS cho toàn bộ Ứng dụng.

Có ai có một vài dòng mã đơn giản mà tôi có thể thêm để giúp giải quyết vấn đề này không?

Answer 1

Bạn có thể sử dụng các truy vấn phương tiện truyền thông CSS cho chân dung và phong cảnh định hướng, nó không phải là phức tạp ở tất cả:

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

Sử dụng những phương tiện truyền thông thắc mắc bạn có thể ghi đè background-image cho bất kỳ định hướng.

tài liệu chính thức: http://www.w3.org/TR/css3-mediaqueries/#orientation

Có hai cách để sử dụng nó:

đoán bạn có <div> với lớp header:

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

Ngoài ra, bạn có thể muốn sử dụng <img> thẻ. Trong trường hợp này, bạn sẽ cần hai trong số chúng, và ẩn/chỉ hiển thị một với các quy tắc CSS. Hãy nói rằng, <img> thẻ có các lớp học header-land và header-portrait tương ứng:

@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

Đây là một câu trả lời về cách sử dụng truy vấn phương tiện truyền thông, đó là một cách khá dễ dàng để giải quyết vấn đề này. Nhưng có một điều kiện tiên quyết là nó ok để hiển thị các hình ảnh làm nền css, và không phải là <img ... />

Pseudo đang

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