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

Question

第一次在这里使用phonegap / cordova。

我希望该应用在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

我不喜欢每种手机的样式。 在每个模拟器上测试它们并相应地更改CSS似乎非常耗时。

关于提高效率的任何技巧？

Answer 1

我想使用Cordova和HTML5是唯一的方法。

由于您使用的是Cordova，因此建议您使用Ionic Framework或Ratchet之类的移动框架。 另一个很受欢迎的是著名的 。

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

Answer 2

如果您不想使用框架，也可以尝试cordova-screengod ：

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

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

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