4

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

4

4 回答 4

6

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

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

或者，如果您想要一个 javascript 事件，您可以绑定到orientationchange。

于 2011-02-28T23:38:19.657 回答
5

我认为当手机从横向变为纵向时不会触发事件。但是，您可以编写自定义函数来找出当前方向。在 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");
}
});

来自这里的代码

于 2011-02-28T11:09:22.070 回答
2

建议使用 CSS3 媒体查询，因为不推荐使用 jQuery 移动方向类：http: //jquerymobile.com/demos/1.0b2/docs/api/mediahelpers.html

有关 CSS3 媒体查询的演示：http ://www.webdesignerwall.com/demo/media-queries/

于 2011-08-17T19:40:24.833 回答
1

我使用这个 css3 规则：

@media（方向：横向）{

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

}

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

于 2011-10-24T21:07:18.623 回答