4

ヘッダーと背景に画像を追加する必要があります。画面の向き（縦向きと横向き）に応じて画像のサイズを自動的に変更するように設定することはできますか？画像を縦向きの解像度に設定しましたが、画面を横向きに変更すると、画像のサイズが変更されません。誰かが私にいくつかのガイドラインを与えることができますか？

4

4 に答える 4

6

これのサポートはjQueryMobileに組み込まれています。現在の画面の向きに応じて存在する2つの向きのクラスがあります。

.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

jQueryモバイルオリエンテーションクラスは非推奨であるため、CSS3メディアクエリを使用することをお勧めします：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 に答える