Phonegap/Cordova 引用 UI 的简洁方式会随着 Orientation 的改变而改变？

Question

我想知道当 Phonegap 应用程序中的方向发生变化时，是否有任何巧妙的方法来引用 UI 变化。

或者我必须在下面对每个元素都这样做？？

if ((window.orientation == 90)||(window.orientation == -90)) {
                      var active_page3 = $( ":mobile-pagecontainer" ).pagecontainer( "getActivePage" );
    var id3 =active_page3.page().attr('id');
    if (id3==='page') {
           document.getElementById("headerimage").style.width = "30%";           
    }

Answer 1

Media Queries 正是针对您的问题而设计的。它们用于开发响应式网页设计以及开发混合应用程序 ;-)。

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}

所以，这个媒体查询意味着，如果 screen max-width 是 300px，background-color 只会是蓝色。

在深入探讨这个主题之前，我建议您阅读此处有关媒体查询的详细信息：W3Schools - Media Queries。

关于这个的更多信息可以在 www 中随处找到 - 只是 google 用于媒体查询，这么大的事情，您当然会找到相关信息。

属于约翰的评论，仅补充一些信息

我在之前构建的应用程序中使用 jQuery 对其进行了测试。所以我使用了这个命令：

console.log($(window).height(), $(document).height(), $(window).width(), $(document).width());

在纵向模式下结果是：

$(window).height(): 568
$(document).height(): 568
$(window).width(): 320
$(document).width(): 320

在横向模式下结果是：

$(window).height(): 320
$(document).height(): 320
$(window).width(): 568
$(document).width(): 568

我希望，这已经足够清楚了吧？！ =)

Phonegap/Cordova 引用 UI 的简洁方式会随着 Orientation 的改变而改变？

Phonegap/Cordova Neat way to reference UI changes when Orientation changes?

phonegap-plugins

cordova