19

私は、ユーザーが携帯電話を縦向きから横向きに回転させたときに、埋め込まれたWebページを変更する方法を理解しようとしています。基本的には、より広い画面形式により適したビューをロードします。これは、サーバーから新しいページを呼び出さずに実行できますか？つまり、CSS / Javascript自体からページを駆動できますか？

ありがとう！

4

6 に答える 6

19

プロパティを使用できwindow.orientationます。その値は、現在の表示モードが使用される度合いです。簡単な例を次に示します。

function updateOrientation()
{   
    var orientation=window.orientation;
    switch(orientation)
    {

        case 0:

                break;  

        case 90:
                break;

        case -90:   

                break;
    }

}

このイベントでこの関数を使用できます。

window.onorientationchange=updateOrientation;

お役に立てば幸いです。

于 2010-02-22T18:46:50.757 に答える
7

onorientationchangeプロパティを直接設定しないことをお勧めします。代わりに、以下を使用してください。

window.addEventListener('orientationchange', function (evt) {
    switch(window.orientation) {
        case 0: // portrait
        case 180: // portrait
        case 90: // landscape
        case -90: // landscape
    }
}, false);
于 2010-04-21T03:04:25.917 に答える
5

Safariモバイルブラウザは、orientationchangeイベントとorientationウィンドウのプロパティをサポートしているため、次のようなことができます。

window.onorientationchange = function() {
    switch(window.orientation) {
        case 0:   // Portrait
        case 180: // Upside-down Portrait
            // Javascript to setup Portrait view
            break;
        case -90: // Landscape: turned 90 degrees counter-clockwise
        case 90:  // Landscape: turned 90 degrees clockwise
            // Javascript to steup Landscape view
            break;
    }
}

iPadのヒューマンインターフェイスガイドラインではすべての向きをサポートする必要があると書かれているので、逆さまに追加します。そのため、iPad（および場合によっては将来のiPhoneバージョン）のSafariがそれをサポートすることを期待します。

于 2010-02-22T18:44:48.233 に答える
5

私は誰もcssの裁定について話していなかったとは信じられません：

@media screen and (max-width: 320px) // Portait Mode
{
/* CSS RULINGS */
p{}
body{}
}

@media screen and (min-width: 321px) // Landscape Mode
{
/* CSS RULINGS */
p{}
body{}
}
于 2011-05-16T12:15:50.297 に答える
0

SafariMobileはオリエンテーションイベントをサポートしています。

于 2010-02-22T18:43:59.937 に答える
0 
<body onorientationchange="updateOrientation();">

差出人：SafariWebコンテンツガイド

于 2010-02-22T18:47:40.517 に答える