0

ネイティブiOS開発からクロスプラットフォームに移行しました。phonegapを使用していますが、デバイスの画面サイズと向きに基づいてさまざまなレイアウトを作成したいと思います。私がやりたいのはこのコードに似たものです

if(orientation == LANDSCAPE)
{
    if(screen.width < 320)
    {
        //use css #1
    }
    else
    {
        //use css #2
    }
}
else //orientation is PORTRAIT
{
    if(screen.width < 320)
    {
        //use css #3
    }
    else
    {
        //use css #4
    }
}

または、それがデザインを行うための適切な方法ではない場合、どうすればよいですか？

4

3 に答える 3

1

それはあなたが何をしたいかにひどく依存します。デバイスの解像度または画面の向きに基づいてロジックを変更したり、DOMから要素を追加/削除したりする場合は、JSの方法を使用してください。jQueryを使用している場合は、次のように簡単です。

var deviceWidth = $(window).width();
var deviceHeight = $(window).height();

それでも、CSS自体は、画面サイズに応じて条件付きスタイルの方法を提供します。これらはmedia-queries（http://www.w3.org/TR/css3-mediaqueries/）と呼ばれ、次のように使用できます。

@media only screen and (max-device-width: 480px) {
    body {
        font-size: 2em;
        /* etc. these styles will be applied only when device's screen is smaller than 480px */
    }
}

使用できるプロパティは他にもたくさんあります。max-device-width単なる例です。さらに、デバイスのサイズが適切でない場合、ブラウザがスタイルファイルをロードしないようにすることができます。

<link rel="stylesheet" media="only screen and (max-width-device: 480px)" href="480-device.css" />

w3cのドキュメントを参照するか、を検索してmedia-queriesください。現在、ほぼすべてのブラウザと互換性があります：http: //caniuse.com/#feat=css-mediaqueries

于 2012-09-24T07:35:06.000 に答える
0

PhoneGapがWebアプリをネイティブシェルにラップすることを考えると、基本的にこの時点でWeb開発を行っています。メディアクエリを調べる必要があります。公開したコードの場合、適切なメディアクエリは次のようになります。

/* Landscape */
@media screen and (orientation: landscape) {
    /* Landscape styles */
}

/* Portrait */
@media screen and (orientation: portrait) {
    /* Portrait styles */
}

/* Portrait and screen width < 320 */
@media screen 
and (orientation: portrait)
and (max-width: 320px) {
    /* Portrait styles for screen smaller than 320 pixels */
}

メディアクエリの仕様では、メディアクエリをネストできるようにする必要があります。これにより、コントロールステートメントの構造により厳密に一致しますが、残念ながら、最近のほとんどのブラウザはこれをまだサポートしていません。

于 2012-09-24T07:39:11.660 に答える
0

次のJSコードを試してみてください。

function _orientationHandler() {
    if(event.orientation){
        if(event.orientation == 'portrait'){
            if(screen.width < 320)
            {
                //use css #1
            }
            else
            {
                //use css #2
            }
    }
    else if(event.orientation == 'landscape') {
        if(screen.width < 320)
        {
            //use css #1
        }
        else
        {
            //use css #2
        }
    }
}

$(window).bind('orientationchange', _orientationHandler);
于 2012-09-24T07:44:43.967 に答える