изменить размер изображения в соответствии с портретом и пейзажем в jquerymobile?

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


landscape jquery-ui jquery-mobile portrait
person Lakshmanan    schedule 28.02.2011    source источник

Ответы (4)


arrow_upward
6
arrow_downward

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

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

Или, если вам нужно событие javascript, вы можете привязать его к изменению ориентации.

person JohnTESlade    schedule 28.02.2011
comment
поэтому из приведенного выше кода мы должны установить разные размеры изображения как для портретной, так и для альбомной ориентации. это то, что ты собираешься сказать? если да, то как мы можем установить размер изображения? потому что разные платформы имеют разный размер ландшафтного экрана. - person Lakshmanan; 01.03.2011

arrow_upward
5
arrow_downward

Я не думаю, что есть события, которые запускаются, когда телефон переходит из альбомной ориентации в портретную. Однако вы можете написать пользовательскую функцию, чтобы узнать текущую ориентацию. Напишите следующий код для события 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");
}
});

код из здесь

person Arun    schedule 28.02.2011

arrow_upward
2
arrow_downward

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

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

person bafromca    schedule 17.08.2011

arrow_upward
1
arrow_downward

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

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

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

}

дополнительная информация: http://www.w3.org/TR/css3-mediaqueries/

person sschat    schedule 24.10.2011