Headbar height in browser model


I am using ionic to create a mobile first website. I noticed the headerbar (or navbar) have excessive height when the page is viewed in a mobile browser (on IOS). The height looks normal in normal browser. This is because of the extra space left for the IOS status bar on the top. and the CSS components responsible are

.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
  height: 64px; }

I am aware changing the setting to have fullscreen will have this problem fixed in portrait mode. However when a fullscreen page is rotated into landscape mode, the header bar will disappear.

how can I modify the CSS to allow the header bar height look normal from a mobile browser on iphone?
or if i use full screen mode, how can i prevent the headerbar disappearing from landscape mode?