PhoneGap：如何讓iPad特定的CSS工作？

我正在爲iPhone構建PhoneGap/Cordova項目。PhoneGap：如何讓iPad特定的CSS工作？

我有2個CSS文件 - 一個普通的CSS規則和一個爲iPad相關的CSS看起來像這樣：

<!--Main Style Sheet-->  
    <link rel="stylesheet" href="css/styles.css" /> 
    <!-- iPad specific css--> 
    <link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="css/ipad.css" type="text/css" />

的問題是，iPad的CSS只是表現得像普通的CSS。當我運行iPhone和iPad模擬器時，會出現CSS。

誰能幫助我嗎？

謝謝！

爲iPad你想分鐘 -device寬度

來源

2012-06-14 MeltingDog

心不是iPhone的最大設備寬度也低於768像素?? – ppsreejith

，不是最大的設備寬度（即一臺iPad擁有768px在人像模式中的最小寬度）

來源

2012-06-14 23:04:30 Marcin

太好了！那就做完了，謝謝！ – MeltingDog

最大設備寬度爲我們提供了最大不是最低限度，所以它會影響包括iphone在內的所有低於768像素的設備。給予最小寬度也應該修復它。可能（最小設備寬度：481px）

來源

2012-06-14 23:09:45 ppsreejith

如果上述解決方案不能解決某些讀者的問題，則此問題與響應式網頁設計直接相關。

我會建議在其中使用只有一個樣式表與媒體查詢。

@media screen and (max-width:768px){ 
    /* Device Specific CSS rules here */ 
}

我在這裏選擇了max-width，因爲以上任何東西都會渲染普通的CSS。然後，您可以設置另一個媒體查詢，其最大寬度大約爲500px，可用於定位智能手機。請記住，媒體查詢會自動繼承指定的所有常規CSS規則，並且需要在媒體查詢中定義的唯一規則是設備特定的樣式。

這完全一樣的東西;然而，這隻需要瀏覽器解析一個樣式表，生成一個更快的加載時間（儘可能小，但速度更快）。

當使用媒體查詢時，還需要在視口元標記你的HTML，否則，您的設備將呈現相同的CSS作爲桌面。

此外，CSS3媒體查詢是通過最現代的移動瀏覽器的支持。

來源

2012-06-15 04:45:29

PhoneGap：如何讓iPad特定的CSS工作？

回答

相關問題