Question

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

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

但是当将iPhone上的方向从横向改为纵向时，我的屏幕比实际页面更宽，当表格中有输入字段时，滚动显示在中间在页面上。 然而，当在表单输入字段上选择（聚焦）时，页面将重新呈现，宽度正确且无滚动。我已经使用了一些响应式CSS，如@media only屏幕和（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.. 
  }
});

Answer 1

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

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

jQuery Mobile在横向肖像更改重新渲染页面

1 个答案: