jQuery Mobile 上的横向纵向更改重新渲染页面答案

【问题标题】：jQuery Mobile on landscape portrait change re-render pagejQuery Mobile 上的横向纵向更改重新渲染页面
【发布时间】：2013-04-14 20:30:48
【问题描述】：

我正在 jQuery Mobile 中创建一个基于 wordpress 的应用程序，其子主题为 21 岁。可能CSS可以做得更好。该应用程序加载正常，没有缩放，也没有滚动

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

但是当将 iPhone 上的方向从 横向更改为纵向时，我的屏幕比实际页面更宽，并且当表单中有输入字段时，滚动显示在中间在页面上。 但是，当在表单输入字段上选择（聚焦）时，页面会重新呈现，并且宽度正确且没有滚动。我使用了一些响应式 CSS，例如 @media only screen 和 (max-width:..

那么有没有好的方法呢？

//This one triggers on orientation change
jQuery( window ).on('orientationchange', function( event ) { 
  if(event.orientation == 'portrait'){
    // Rerender as if an input field is focused.. 
  }
});

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

这可能是一个解决方案。更好的当然是阻止它从头开始构建一些好的 CSS，但是如果在 wordpress 中使用 212 作为父主题 - 这段代码可能会派上用场。

jQuery( window ).on('orientationchange', function( event ) { 
    if(event.orientation == 'portrait'){
        jQuery('body').fadeOut(300, function(){ 
            jQuery('body').fadeIn(300);
        });
    }
});

【讨论】：