This method delivers a full-height header experience for phones, and a half-height header as the browser width increases, perhaps for tablets:
- Set the default height of your header div to 100vh
- If desired, set the header height to 50vh at a tablet breakpoint, halfway up
- For the full resolution desktop experience, the header can return to its "natural" state (auto height)