PhoneGap的CSS媒體查詢方面不起作用

我已經開發了一個應用程序與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%; 
    } 
}

來源

2013-03-22 adnanyousafch

把你的元標記， <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-22 10:14:30

PhoneGap的CSS媒體查詢方面不起作用

回答

相關問題