0

電話でのみ表示される非常に単純なページを作成しています。このページの目的は、純粋に携帯電話を横向きに持つよう促すことです。

私ができることを望んでいるのは、メディアクエリなどを使用してデバイスの向きを検出することです。ユーザーが携帯電話を縦向きに持っている場合は、横向きに持つように求めるメッセージと画像を表示してもらいたいと思います。携帯電話を横向きにすると、リンクが画面に表示され、クリックできるようになります。とても簡単ですが、残念ながら、デバイスの向きに基づいてスタイルシートを変更するコードしか見つかりませんが、実際にページの本文を変更できるコードはありません。誰でも助けることができますか？

ありがとう！

4

4 に答える 4

1

JavaScript 経由で、グローバル プロパティ「window.orientation」を使用できます。

ユーザーが電話の向きを変えると、イベント「orientationchange」が実行されます。たとえば、このイベントを次のように処理できます。

    $('body').bind('orientationchange', function(e) {
    alert("Smartphone was turned");
});

Javascript と CSS のいくつかの行を使用すると、ランドスケープではないユーザーにさまざまなコンテンツを表示できます。

check_orientation 関数:

jQuery(function($) {
    $('body').bind('orientationchange', function(e) {
        check_orientation();
    });
    check_orientation();
});

したがって、関数は電話が「正しい方法」で保持されているかどうかを確認し、コンテンツを表示/非表示にします。

var check_orientation = function() {
    if(typeof window.orientation == 'undefined') {
        //not a mobile
        return true;
    }
    if(Math.abs(window.orientation) == 90) {
        //portraitmode
        $('#landscape').fadeOut();
        return true;
    }
    else {
        //landscape mode
            $('#landscape').fadeIn().bind('touchstart', function(e) {
            e.preventDefault();
        });
        return false;
    }
};

content-div のタグ:

<div id="landscape">Bitte drehen Sie Ihr Gerät!</div>

そしてあなたのcss-entry：

#landscape {  
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:rgba(0,0,0,0.75);
    z-index:1999;
}
于 2013-10-16T13:29:43.273 に答える
1

まず第一に、あなたのウェブサイトが縦向きと横向きの両方で動作するのが良いでしょう。

ただし、デバイスの向きに基づいてスタイルシートを変更できるように見えるので、それを利用できるように Web サイトを準備するだけです。bodyタグ内に 2 つdivの を作成します。そのうちの 1 つは横向きモードで表示したい Web サイトのコンテンツを配置し、もう 1 つはプロンプトを配置します。

次に、向きにメディアクエリを使用display: none;して、それぞれの をそれぞれの向きでdisplay: block;表示するだけdivです。

ポートレートモードの例:

@media screen and (orientation:portrait) {
    #portraitContent {
        display: block;
    }
    #landscapeContent {
        display: none;
    }
}

ランドスケープ モードの場合は、その逆にします。

于 2013-10-16T13:24:56.410 に答える
0

これを解決する方法について、他にいくつかのアイデアがあります。

PopupWindow を使用して、デバイスを横向きモードにするようユーザーに促すことができます。

または、次のように入力して、デバイスを横向きモードに強制できます

<activity....
android:screenOrientation="landscape"

そのアクティビティのマニフェストで。

幸運を。

于 2013-10-16T13:21:50.947 に答える
0

CSS3でこれを行うことができます

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}
于 2013-10-16T13:22:37.067 に答える