Is there a way to get iPad re-render a web page after rotating? [duplicate]

Question

This question already has answers here:

What is the best method of re-rendering a web page on orientation change? (8 answers)

Closed 6 years ago.

We have a website that has gaps appear between elements when displayed on an iPad, after the device is rotated. The gaps disappear again if the page is refreshed.

Found this question on here which I'm trying (but don't have an iPad to test on before passing back to the client), so thought I'd ask to see if anyone could give a definitive answer on whether you can force a page re-render after rotation, using JS?

Answer 1

Are you detecting the orientation change?

You may want to look at this question: How do I correctly detect orientation change using javascript and Phonegap in IOS?

or this article:

http://www.williammalone.com/articles/html5-javascript-ios-orientation/

Then to force a redraw you could look at this question:

Force DOM redraw/refresh on Chrome/Mac

Put a div around all of your content.

Basically you use window.onorientationchange to detect the change.

Then when you detect a change, then just set the display on the main div to 'none' and then use a timeout to allow the page to redraw, then change it back to visible, and it will be redrawn.

I haven't tried this, but it should work.

Answer 2

i slove it, i find page rotating not repaint when boardcast show in ios platform; so i cibleforcible bowser repaint when device rotating；

$('.w_wrap').hide();
        setTimeout(function(){
            $('.w_wrap').show();
        },20);

it is not good method，so i find this （Force DOM redraw/refresh on Chrome/Mac） but i didn't practice it