web-dev-qa-db-ja.com

モバイルサイト-強制的にランドスケープのみ/自動回転なし

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

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

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

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

ありがとう！

jquerycssmobilelandscapeautorotate
23
Joey

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

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

私は最高のアプローチだと思う

17
daver

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';
}

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

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

このソリューションがあなたのために働くかどうか私に知らせてください。

16
Yoann

ユーザーが変更されたときに変更されるように、スクリプトが最善のアプローチだと思います。これを修正して、ポートレートのときにページのメイン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>
3
Thomas Watson

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

あなたの問題を解決してください。

0
Rizky Ariestiyansyah

次のコードを試してみましたが、ブラウザでポートレートモードを使用するように強制されました。

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

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

0
Wissam El-Kik