2

iPhone をデザイン ターゲット (つまり 640x960 => 2:3) としてアプリを開発しました。レイアウトの各分割にパーセンテージを使用して、UI がデバイスのサイズに合わせて伸縮するようにしました。これで iPad では問題なく動作しますが、アスペクト比 9:16 のデバイスでは問題が発生します。この目的でメディア クエリを使用しましたが、うまくいきません。

除算のデフォルト コードは次のとおりです。

.top_bar {
    height: 9%;
}

メディア クエリのアスペクト比を使用するようになりました:

@media screen and (min-device-aspect-ratio: 9/16) {
    .top_bar {
        height: 7.5%;
    }
}

しかし、これはブラウザでもデバイスでも機能していません。

ビューポート メタタグのコンテンツ値を次のように追加しました

content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densityDpi=device-dpi"

後で、縦横比を検出するために複数の解像度を試しました。

@media 
only screen and (min-device-width: 320px) and (min-device-height: 560px),
only screen and (min-device-width: 480px) and (min-device-height: 850px),
only screen and (min-device-width: 640px) and (min-device-height: 1130px),
only screen and (min-device-width: 720px) and (min-device-height: 1270px),
only screen and (min-device-width: 768px) and (min-device-height: 1360px),
only screen and (min-device-width: 800px) and (min-device-height: 1422px),
only screen and (min-device-width: 960px) and (min-device-height: 1700px),
only screen and (min-device-width: 1080px) and (min-device-height: 1910px)
{

.top_bar {
    height: 7.5%;
}
}

しかし、これもうまくいきません。

更新 - 修正済み

少し実験して、min-device-aspect-ratio: 9/16をmax-aspect-ratio: 9/16に変更しただけで 、現在は正常に動作しています。

@media screen and (max-aspect-ratio: 9/16) {
    .top_bar {
        height: 7.5%;
    }
}
4

1 に答える 1

1

このようにあなたのメタタグを入れてください <meta name="viewport" content="width=device-width, initial-scale=1">

そしてあなたのメディアクエリを書く

@media only screen and (min-width: 768px) and (max-width: 956px){
.top_bar { height: 7.5%;}
}
于 2013-03-22T10:14:30.517 に答える