Layout for Iphone. How to display the entire page in horizontal mode with a menu?

Question

iPhone

there is a customer requirement that the page should fit entirely in a horizontal orientation on iPhones 5 and 6,
the problem is in the safari navigation menu, when it appears, the window size does not change and the content is partially hidden and goes down.
All the methods that I found on the internet only work in full screen mode.
How to determine the size of the visible area on an iPhone with a menu?
what event fires when the menu appears and hides?

Answer 1

1. Use the debugger in chrome. There is a horizontal orientation mode. You can also use: to define the window width. 2. When the menu appears / hides, "onresize" is most likely triggered. Maybe media queries will help you

@media all and (orientation: landscape) {
  /* Target device in landscape mode */
}

@media all and (orientation: portrait) {
  /* Target device in portrait mode */
}

or the screen orientation change event
https://developer.mozilla.org/en-US/docs/Web/Even...

Answer 2

quirktools.com/screenfly enter the page address and select the device type