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は、おそらく最も効率的ではありません。これは、バウンス解除機能または他の同様の性能向上の恩恵を受ける可能性があります。
私はまだこの分野で学んでいます。これは 'screen.orientation.angle'を通して達成できますか? – Chay22
おそらく、このcoudlの助けがあります:https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation しかし、私はあなたが左右の風景を検出することができるとは思わない... CSSのプロパティの外観dpiと画面サイズで向きを決定する – johan
逆さまの肖像画はどうですか? – BDawg