Click the full-screen button, press esc to exit full screen

Requirements: Click the button to make the page full screen, and menu navigation bar is hidden, content width of 100 percent; press esc to exit full-screen, menu navigation bar display;

Question: Press esc to exit full-screen keyboard can not listen to the press event, (compatibility issues, whether full-screen status monitor, monitor Firefox does not work);

Solution: Listener browser page size, page determine the actual height is equal to height resolution of the browser;

Note: You must take the body height to 100%; margin is 0; padding is 0; otherwise, the actual height of the page is not equal to the height resolution of the browser;

*************************************************************************************************************************************************

css section

 

 

html part

 

js part

1) Click to enter full screen

2), the page monitor changes in subsequent operations