Question

我必须在标题和背景上添加图像。是否可以根据屏幕方向（纵向和横向）自动调整图像大小。我以纵向分辨率设置图像，但当我将屏幕更改为横向时，图像未调整大小。任何人都可以给我一些指导吗？

Answer 1

jQuery Mobile内置了对此的支持。根据当前的屏幕方向，有两个Orientation Classes存在：

.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

的

代码

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（orientation：landscape）{

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

}

更多信息：http://www.w3.org/TR/css3-mediaqueries/

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

4 个答案: