jQuery Mobile在横向肖像更改重新渲染页面上 [英] jQuery Mobile on landscape portrait change re-render page

问题描述

我正在jQuery Mobile上创建一个基于wordpress的应用程序，其子主题为22.也许CSS可以做得更好.该应用程序加载良好，并且没有缩放，也没有使用

I'm creating an app in jQuery Mobile based on wordpress with a child theme for twenty twelve. Probably the CSS could be made better. The app loads fine and is without zoom and no scrolling with

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

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

But when changing orientation on an iPhone from landscape to portrait I'm getting a wider screen than the actual page and the scroll shows up in the middle when there is an input-field in a form on the page. however when choosing (focus-ing) on a form input field the page re-renders and the width is correct with no scroll. I've used some responsive css present like @media only screen and (max-width:..

那么有什么好方法吗?

So is there a good way of doing this?

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

推荐答案

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

This could be a solution. Better ofcourse is to prevent it to build some good CSS from the ground up, but if using twenty twelve as a parent theme in wordpress - this code might come handy.

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

这篇关于jQuery Mobile在横向肖像更改重新渲染页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！