私はモバイルスタイルシートを持っているサイトがあります。携帯サイト - 力の風景のみ/なし自動回転
<link rel="stylesheet" href="css/mobile.css" media="handheld">
を私はまた、モバイルデバイスを確認し、それに応じて機能を変更するjQueryのを使用しています。
しかし、私は横向きの向きを強制し、自動回転を無効にする方法があるかどうかを知りたいですか？どちらかCSSまたはjQueryソリューションは問題ありません。
ありがとうございます！
ウェブページの向きを強制することはできませんが、ポータルモードでコンテンツを提案またはブロックすることはできます。
私はその後litleを追加し、すべてのページに
#block_land{position:absolute; top:0; left:0; text-align:center; background:white; width:100%; height:100%; display:none;}
をカバーするために、あなたのCSSを適応させるdiv要素
<div id="block_land">Turn your device in landscape mode.</div>
を追加するには、HTMLファイルにexisting script
のadaptationを作りました方向を検出するためのjavacript
function testOrientation() {
document.getElementById('block_land').style.display = (screen.width>screen.height) ? 'none' : 'block';
}
このソリューションは、あなたのために働くなら、私に教えてください
<body onorientationchange="testOrientation();" onload="testOrientation();">
多分あなたのbodyタグに、onloadイベントとonorientationchange向きをテストすることを忘れないでください。
メディアクエリを使用して向きをテストし、ポートレートスタイルシートですべてを非表示にして、アプリケーションがランドスケープモードでのみ動作することを示すメッセージを表示します。
<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">
私はときに、ユーザーが変更、それが変化するように最善のアプローチは、スクリプトだと思う最高のaproach
だと思います。これを変更して、ポートレートでページのメインDIVを回転させ、ユーザーに切り替えてもらうようにしました。彼らは横に頭を傾けする場合を除き：
<script type="text/javascript">
(function() {
detectPortrait();
$(window).resize(function() {
detectPortrait("#mainView");
});
function detectPortrait(mainDiv) {
if (screen.width < screen.height) {
$(mainDiv).addClass("portrait_mode");
}
else {
$(mainDiv).removeClass("portrait_mode");
}
}
})();
</script>
<style type="text/css">
.portrait_mode {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
これは間違いなくJSアニメーションとページのモバイル対応性を破るでしょう。開発者にとってより多くの問題を引き起こし、修正と見なすことはできません。 –
@ WissamEl-KikそれはまだOPが望んでいることをします。そして、実際には、OPが求めているものは、モバイルの応答性を損なうでしょう。そうすれば、この答えを責めることはできません！しかし、実際にはJavaScriptは必要ありません。 'orientation：portrait'メディアクエリでこれを起動することもできます。 –
を私は次のコードを試してみました、それはポートレートモードを使用するようにブラウザを余儀なく：
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
このコードは、iPhone上で、別の上でテストされていますモバイル機器。横向きを強制的に
すみません、私はコードがユーザーのズームインまたはズームアウトを妨げていると思います。 iphone 4SのSafariとAndroid 4.3のChromeでテストされているが、横長モードと縦長モードの両方が可能です。 –
簡単な方法は、あなたのCSSコードであなたの最小 - 最大幅を設定して、あなたの問題を解決するための希望
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
body {
-webkit-transform: rotate(90deg);
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}}
このコードを使用してみてください。
私は似たような解決策を試しました。私が遭遇した問題は、いくつかの人が向きを固定していたことです。だから、彼らはロックを解除する必要が本当に迷惑だった。理想的には、ページは横に表示されます（多くのゲームアプリのように）。それを解決するためにCSSの回転を使用して調べるつもりです。 – gman