2
我已经开发了一个应用程序与iPhone作为设计目标(即640x960 => 2:3),我已经这样做使用百分比的每个部门的布局,以便用户界面本身就设备尺寸。现在这款iPad可以正常工作,但我在9:16宽高比的设备上遇到了问题。我用Media Queries来达到目的,但这不起作用。PhoneGap的CSS媒体查询方面不起作用
除法默认代码是:
.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%;
}
}
但是这是不工作要么。
UPDATE - FIXED
实验一点,只是改变分钟设备纵横比:9/16到最大纵横比:9/16 及其工作现在细。
@media screen and (max-aspect-ratio: 9/16) {
.top_bar {
height: 7.5%;
}
}