I’m having an issue where the “top” value for the css of the header bar changes between my web testing environment and an actual iOS device. I think it may be the result of the size of the status bar changing. I am testing with ionic serve --lab -lcs and using ionic view. Is there a way to write css specifically for the web version or iOS device version? I am adjusting the top value of the header bar through the class .bar-header. Please let me know any other information I can provide, such as screenshots or code, if necessary.
To be more specific, I must adjust the height of .bar-header to be 20px larger on iOS, and the top of .has-header to be 20px larger on iOS. I assume there is some sort of StatusBar configuration I am missing. I’ve tried with and without the following, but I don’t think it’s even relevant here.
if (window.StatusBar) {
StatusBar.overlaysWebView(true);
}