2016-05-18 4 views
1

私のモバイルアプリでは、デバイスが縦になっているときにアプリの一番下に固定されているバーがあります。モバイルが風景の上にいるときに同じ側にdivを修正する方法

風景のときは、画面の下部ではなく側面に移動して固定する必要があります。

ここでは、ディスプレイと幅と位置を変更することで、メディアクエリでこれを行うことができます。しかし、私の問題は、携帯電話のホームボタンがある側に常にバーを固定することです。ユーザーが左に携帯電話を傾ける場合はここで

enter image description here

  • 、私が達成したいものです - バーが 右に固定されています。
  • ユーザが電話機を右に傾けた場合 - バーは 左に固定されています。

私はあなたがどのような行動を実装する方法を教えてくださいすることができ角度2とイオン2

を使用しています。純粋なCSS、角度解決策は素晴らしいでしょう。

+0

私はまだこの分野で学んでいます。これは 'screen.orientation.angle'を通して達成できますか? – Chay22

+0

おそらく、このcoudlの助けがあります:https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation しかし、私はあなたが左右の風景を検出することができるとは思わない... CSSのプロパティの外観dpiと画面サイズで向きを決定する – johan

+0

逆さまの肖像画はどうですか? – BDawg

答えて

2

JSソリューション

それを行うには、純粋なCSSの方法があるようですが、いないようです。理論的には、適切なCSSクラスをいくつかのJSを介して動的に追加/削除することができるはずですが、デバイスの向きの変更をリッスンする必要があります。 portrait,landscape-left、およびlandscape-rightのようなクラス名を使用して、<body>に追加することができます。私のサンプルコードは、以下を参照してくださいか(それが唯一のdivの色を変更しますが、私はあなたがそこから適切なCSSを把握することができます確信していることに注意してください)this code penでそれを試してみる:

JS:

function clearOrientationClasses() { 
    document.body.classList.remove('portrait-up'); 
    document.body.classList.remove('landscape-left'); 
    document.body.classList.remove('portrait-down'); 
    document.body.classList.remove('landscape-right'); 
} 

function handleOrientation(event) { 
    var alpha = event.alpha; 

    // Up 
    if(alpha <= 45 || alpha > 315) { 
     clearOrientationClasses(); 
     document.body.classList.add('portrait-up'); 

    // Left 
    } else if (alpha > 45 && alpha <= 135) { 
     clearOrientationClasses(); 
     document.body.classList.add('landscape-left'); 

    // Down 
    } else if (alpha > 135 && alpha <= 225) { 
     clearOrientationClasses(); 
     document.body.classList.add('portrait-down'); 

    // Right 
    } else { 
     clearOrientationClasses(); 
     document.body.classList.add('landscape-right'); 
    } 
} 

window.addEventListener("deviceorientation", handleOrientation, true); 

CSS:

.portrait-up .menu { ... } 
.portrait-down .menu { ... } 
.landscape-left .menu { ... } 
.landscape-right .menu { ... } 

More info on Device Orientation at MDN

メディアクエリー

上記の方法は、すべてのブラウザ/デバイスでサポートされているわけではありません。 @media (orientation: portrait) { ... }@media (orientation: landscape) { ... }のようなメディアクエリを使用すると、ギャップを部分的に埋めることができますが、これはあなたの望むようにメニューを左右に配置する手段を提供しません。

メディアクエリを使用して、常にデバイスオリエンテーションがサポートされていない特定の側面に配置することをお勧めします。または、この制限に照らしてプロジェクト要件を変更するだけです。

ここでも、more info at MDN

追加メモ: 上記のJSは、おそらく最も効率的ではありません。これは、バウンス解除機能または他の同様の性能向上の恩恵を受ける可能性があります。

関連する問題