使用 Phonegap 的 IBM Worklight 响应式 Web 应用程序
Posted
技术标签:
【中文标题】使用 Phonegap 的 IBM Worklight 响应式 Web 应用程序【英文标题】:IBM Worklight Responsive Web App using Phonegap 【发布时间】:2013-03-22 13:43:19 【问题描述】:我正在尝试使用 Phonegap(cordova) 和 IBM Worklight 制作示例混合移动应用程序。我已将 iPad 和 iPhone 添加为目标设备。
应用内的网页内容将是响应式的,使用 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 */
谁能建议如何在 IBM Worklight 中制作响应式 webapp,phonegap
【问题讨论】:
不确定您的问题,但我理解您想要做的(响应式网格)是一个已解决的问题。看看Bootstrap's Grid System 或Foundation's Grid System。 other alternatives 有很多,有些提供的功能比其他的多。 @user2199430,你的问题解决了吗? 【参考方案1】:试试这个:
/* 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 */
【讨论】:
以上是关于使用 Phonegap 的 IBM Worklight 响应式 Web 应用程序的主要内容,如果未能解决你的问题,请参考以下文章
IBM Worklight - 我可以更改 invokeProcedure 主机名和端口吗?
worklight 内部是不是使用 phonegap 框架?
IBM 的 Worklight xcode .framework 文件