html - 无论屏幕尺寸如何，我如何强制 Phonegap 应用程序保持相同的比例？

Question

我正在编写我的第一个 Phonegap 应用程序，我对处理所有不同的屏幕尺寸感到有点头疼。因此，由于我的应用仅针对手机，我想我知道我的理想解决方案如何运作，但我完全不知道如何实现它。

基本上，我希望整个页面表现得像一张图片。与其保持相同的大小并随着屏幕变小换行，我希望文本的实际字体大小减小，同时保持设计的所有间距和比例。我试过仅使用百分比来定义边距、宽度、字体大小等，但效果并不完全符合我的要求。

Answer 1

如果您想要图像之类的东西来缩小/减少设计的字体大小、间距和比例，您必须相应地编写媒体查询。

@media only screen and (max-width: 550px) {
    .title {
        font-size:11px
    }
    .body-box {
        width:440px;
    }
}

@media only screen and (max-width: 600px) {
    .title {
        font-size:12px
    }
    .body-box {
        width:480px;
    }

}

@media only screen and (max-width: 650px) {
    .title {
        font-size:13px
    }
    .body-box {
        width:520px;
    }
}

这也有一些缺点。对于非常小的屏幕显示器或低分辨率显示器(大约 350px)，如果保持此比例，它将约为 7px，并且该尺寸太小而无法阅读。如果有人在 QHD 选项卡 (2160px) 上看到，字体大小将为 44px，这将非常大。

像您这样的应用的长期和完美的解决方案是开始响应式设计。

您可以使用 Bootstrap 开始设计您的 HTML 应用布局.它具有响应性和移动优先性，并且会保持布局。

否则你可以使用onsen.io框架，它也是 Cordova 和 Phonegap 的响应式 HTML5 框架。