It may not be appropriate to call it a bug, but it is a problem I am faced with.
winW = window.innerWidth; winH = window.innerHeight;
Also I add resize() event to the window object:
//Here I will re-detect the size of the window, and then change the size of the container.
It works as expected in desktop browser. While I am testing on iPhone and iPad, the problem comes. It is fine when I open the page with iPhone/iPad vertically, and when I rotate the devices to horizontal view. If I rotate it back vertically again, the code “window.innerWidth” gives “wrong” result.
I suspect this is because of zooming in safari, because when zooming in twice, then window.innerWidth becomes half. It is likely safari use zooming to adjust contents when rotation happens.
I have come up with two solutions: 1, disable the zooming function of safari, because zooming is not very useful for the app I am building. I found some tips on this, but they did not work. 2, storing the size of browser window, and changing the size of container using the stored value. That means, I need to hand it in both mobile and desktop browser, since users can resize the window in desktop browsers which can have infinitely different window sizes.
I am still working on this. Any suggestion will be much appreciated and I will post the solution after I solve it.