デバイスの向きを変えるjquery-mobile

Question

私はモバイルデザインのウェブサイトを行う作業があり、デバイスを傾けるたびにイメージを変更する必要があります。

説明書

あなたに提供された画像を使用して、上記のモックアップに従って、HTMLドキュメント内の4つの層を作成します。これは モバイルウェブページです。 ポートレートとランドスケープの両方向の画像アセットを提供しました。正しい画像は、ユーザーのデバイスの向きに応じて と表示されます。 このページの目的は、ユーザーがデバイスを傾けてレイヤー間を移動できるようにすることです。 例：BLUEページでデバイスを左に傾けて緑色のページに移動し、 右に傾けて黄色のページに移動します。 レイヤ間を移動するときにもフェーディング効果があるはずです。

私はこのようなことを考えていましたが、コードは実際には機能していません。下記のjsfiddleの例を確認してください。ありがとうございます。

HTMLコード

<div data-role="page"> 
    <div data-role="header"> 
    <h1>The orientationchange Event</h1> 
    </div> 

    <div data-role="main" class="ui-content"> 
    </div> 

    <div data-role="footer"> 
    <h1>Footer Text</h1> 
    </div> 
</div> 

Link

Answer 1

あなたはjqueryのを使用して画像のサイズを変更している場合は、CSSメディアより速く、よりだクエリと安定したプロセスを使用してサイズを変更しようとすると、このようなものを使用CSS：

@media screen and (orientation:portrait) { /*CSS for portrait*/ } 

と

@media screen and (orientation:landscape) { /*CSS for landscape*/ } 

cssファイルを置くか動作しないリンクタグにmedia = "screen"属性を使用することを忘れないでください。

また、パーセンテージまたはピクセル（固定幅の場合）および高さをautoに設定すると、画像にmax-widthを指定することができます（max-width：80％など）。高さ：自動;画面のサイズが変更されたり、向きが変化したりすると、画像が伸びないようにします。

さらなる詳細はまあ、それはそう簡単ではありません、以下のリンク

https://api.jquerymobile.com/orientationchange/

Answer 2

を参照してください。デバイス間で多くの矛盾があります。これにはより良いアプローチに切り替える必要があります。車輪を再開発することなく、傾斜や動きの検出のための素晴らしいライブラリがすでにいくつかあります。ただ、一例として

：Full-Tiltで定義されている姿勢、次のとおりです。

SCREEN_ROTATION_0  = 0 
SCREEN_ROTATION_90  = M_PI_2 
SCREEN_ROTATION_180  = M_PI 
SCREEN_ROTATION_270  = M_2_PI/3 
SCREEN_ROTATION_MINUS_90 = - M_PI_2 

あなたは角度を取得し、それに応じてページを変更することができます。 compassの例をテストするには、実際のデバイスが必要です。