23

モバイル スタイルシートを含むサイトがあります。

<link rel="stylesheet" href="css/mobile.css" media="handheld">

また、jQuery を使用してモバイル デバイスをチェックし、それに応じて機能を変更しています。

しかし、横向きのみの向きを強制して自動回転を無効にする方法があるかどうか知りたいですか? CSS または jQuery ソリューションのいずれかで問題ありません。

ありがとう！

4

6 に答える 6

19

メディア クエリを使用して向きをテストします。ポートレート スタイルシートですべてを非表示にし、アプリがランドスケープ モードでのみ動作するというメッセージを表示します。

<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)">

私は最善のアプローチだと思います

于 2012-10-03T16:49:40.863 に答える
16

Web ページの向きを強制することはできませんが、portarit モードでコンテンツを提案またはブロックできます。

既存のスクリプトの適応を行いました

HTMLファイルにdiv要素を追加します

<div id="block_land">Turn your device in landscape mode.</div>

次に、ページ全体をカバーするように CSS を調整します

#block_land{position:absolute; top:0; left:0; text-align:center; background:white; width:100%; height:100%; display:none;}

次に、向きを検出するための小さな JavaScript を追加します。

function testOrientation() {
  document.getElementById('block_land').style.display = (screen.width>screen.height) ? 'none' : 'block';
}

onload と onorientationchange で方向をテストすることを忘れないでください。おそらく body タグで

<body onorientationchange="testOrientation();" onload="testOrientation();">

この解決策がうまくいくかどうか教えてください。

于 2012-06-11T09:25:28.830 に答える
4

最善のアプローチは、ユーザーが変更されると変更されるようにスクリプトを作成することだと思います。これを変更して、縦向きのときにページのメイン 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>
于 2014-02-17T02:12:51.580 に答える
1

横向きを強制する簡単な方法は、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; 
}}

あなたの問題を解決したいと考えています。

于 2014-12-24T17:14:05.887 に答える
0

次のコードを試してみたところ、ブラウザが縦向きモードを使用するようになりました。

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />

このコードは、iPhone および別のモバイル デバイスでテストされています。

于 2014-09-29T08:10:19.027 に答える