изменить размер изображения в соответствии с портретом и ландшафтом в jquerymobile?

Question

Я должен добавить изображение в заголовок и фон. Можно ли настроить автоматическое изменение размера изображения в соответствии с ориентацией экрана (книжная и альбомная). Я устанавливаю изображение в портретном разрешении, но когда я изменяю экран на Пейзаж, изображение не изменяется. Кто-нибудь может дать мне несколько рекомендаций?

Answer 1

Поддержка для этого встроена в jQuery Mobile. Существует два Ориентационных Класса , которые присутствуют в зависимости от текущей ориентации экрана:

.portrait {
    /* portrait orientation changes go here! */
}
.landscape {
    /* landscape orientation changes go here! */
}   

Или, если вы хотите событие javascript, вы можете связать его с Ориентация .

Answer 2

Я не думаю, что есть события, которые запускаются, когда телефон переходит в альбомную ориентацию в портретную. Однако вы можете написать пользовательскую функцию, чтобы узнать текущую ориентацию. Напишите следующий код в событии window.resize.

$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();

if(width>height) {
  // Landscape
  $("#img").attr("src","landscapeurl");
} else {
  // Portrait
  $("#img").attr("src","portraiturl");
}
});

код от Здесь

Answer 3

Рекомендуется использовать медиазапросы CSS3, так как классы мобильной ориентации jQuery устарели: http://jquerymobile.com/demos/1.0b2/docs/api/mediahelpers.html

Для демонстрации медиазапросов CSS3: http://www.webdesignerwall.com/demo/media-queries/

Answer 4

я использую это правило css3:

@ media (ориентация: альбомная) {

#home-feature span  {
  display  : inline-block;
}

}

подробнее: http://www.w3.org/TR/css3-mediaqueries/