媒体查询是支持多种屏幕尺寸的唯一方法吗

Question

第一次在这里与 phonegap/cordova 合作。

我希望应用程序在不同的 phone 上看起来不错，例如 Galaxy 系列和 iPhone 系列。它们都有不同的分辨率，我想知道 phonegap 如何处理它们？

媒体查询是唯一的答案吗？

/* iPhone 5/5S */
@media screen and (device-aspect-ratio: 40/71) {

}

/* iPhone 6 */
@media screen and (device-aspect-ratio: 375/667) {
}

/* iPhone 6+ */
....
and more

我不喜欢我必须为每个 phone 设置样式。在每个模拟器上测试它们并相应地更改 CSS 似乎非常耗时。

关于更有效地执行此操作的任何提示？

Answer 1

我猜 Cordova 和 HTML5 这是唯一的方法。

由于您使用的是 Cordova，我建议您使用像 Ionic Framework or Ratchet 这样的移动框架。另一个非常受欢迎的是 Famous.

Ionic 是使用 angularJs 构建的，因此您也将被迫学习它。

Answer 2

如果不想用框架，也可以试试cordova-screengod:

https://github.com/biodiv/cordova-screengod

 screengod(['path/to/your.css'],function(){
      /* do your stuff */
 });

设备就绪后，它在所有屏幕上看起来都一样。不过，您可能需要调整 css 值...

媒体查询是支持多种屏幕尺寸的唯一方法吗

Is media queries the only way to support multiple screen sizes

cordova