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 回答