我开发了一个以 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%;
}
}
但这也行不通。
更新 - 已修复
尝试了一下,就改变了最小设备长宽比:9/16 to 最大纵横比:9/16现在工作正常。
@media screen and (max-aspect-ratio: 9/16) {
.top_bar {
height: 7.5%;
}
}