根据jquerymobile中的肖像和风景调整图像大小？

Question

我必须在标题和背景上添加图像.是否可以根据屏幕方向(纵向和横向)自动调整图像大小.我以纵向分辨率设置图像,但当我将屏幕更改为横向时,图像未调整大小.谁能给我一些指导方针？

Answer 1

jQuery Mobile内置了对此的支持.根据当前屏幕方向,有两个Orientation类:

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

或者如果你想要一个javascript事件,你可以绑定到orientationchange.

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

代码来自Here