使用Phonegap的IBM Worklight響應式Web應用程序

我正在嘗試使用Phonegap（cordova）和IBM Worklight製作示例混合移動應用程序。我已經將iPad和iPhone添加爲目標設備。使用Phonegap的IBM Worklight響應式Web應用程序

使用CSS @media查詢，應用程序內的網頁內容將作出響應。

我面臨的問題是，當我在iPad/iPhone上啓動應用程序時，它無法識別我寫的媒體查詢。我嘗試使用設備方向方法以及最大寬度方法切換CSS。仍然沒有成功。

在裝置寬度的方法中使用的代碼是

/* Portrait */ 
@media screen and (max-width: 768px) { 
    /* Portrait styles since iPad in portrait has device width 768px */ 

/* Landscape */ 
@media screen and (max-width: 1024px) { 
    /* Landscape styles since iPad in landscape has device width 1024px */ 
}

和方向我想

/* Portrait */ 
@media screen and (orientation:portrait) { 
    /* Portrait styles */ 

/* Landscape */ 
@media screen and (orientation:landscape) { 
    /* Landscape styles */ 
}

有人能想出如何使響應Web應用程序在IBM工作燈，PhoneGap的

來源

2013-03-22 user2199430

不確定你的問題，但是我理解你想要做的（響應式網格）是一個解決的問題。看看[Bootstrap的網格系統]（http://twitter.github.com/bootstrap/scaffolding.html#gridSystem）或[基金會的網格系統]（http://foundation.zurb.com/grid.php）。有許多[其他選項]（http://960.gs/），有些提供比其他更多的功能。 – cnandreu 2013-03-22 15:01:08

@ user2199430，你在這個問題上解決了你的問題嗎？ – 2013-04-20 07:55:33

試試這個：

/* iPhone (landscape) */ 
@media only screen and (min-width : 321px) { 
    /* Your style here */ 
} 

/* iPhone (portrait) */ 
@media only screen and (max-width : 320px) { 
    /* Your style here */ 
} 

/* iPad (landscape) */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
    /* Your style here */ 
} 

/* iPad (portrait) */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
    /* Your style here */ 
}

來源

2013-03-23 20:48:29

使用Phonegap的IBM Worklight響應式Web應用程序

回答

相關問題