Varying Header Bar Top Values

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);
}